diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js index 738d2dcb76..993a0ae489 100644 --- a/components/lib/checkbox/CheckboxBase.js +++ b/components/lib/checkbox/CheckboxBase.js @@ -17,6 +17,26 @@ const classes = { }) }; +const styles = ` +.p-checkbox { + display: inline-flex; + cursor: pointer; + user-select: none; + vertical-align: bottom; + position: relative; +} + +.p-checkbox.p-checkbox-disabled { + cursor: auto; +} + +.p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; +} +`; + export const CheckboxBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Checkbox', @@ -45,6 +65,7 @@ export const CheckboxBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index a5edf8ecf5..58b07cec28 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -95,6 +95,25 @@ const buttonStyles = ` z-index: 1; } `; +const checkboxStyles = ` +.p-checkbox { + display: inline-flex; + cursor: pointer; + user-select: none; + vertical-align: bottom; + position: relative; +} + +.p-checkbox.p-checkbox-disabled { + cursor: auto; +} + +.p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; +} +`; const inputTextStyles = ` .p-inputtext { margin: 0; @@ -202,6 +221,34 @@ const inputTextStyles = ` display: block; width: 100%; } +`; +const radioButtonStyles = ` +.p-radiobutton { + display: inline-flex; + cursor: pointer; + user-select: none; + vertical-align: bottom; +} + +.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(.1); + border-radius: 50%; + visibility: hidden; +} + +.p-radiobutton-box.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1.0, 1.0); + visibility: visible; +} + `; const iconStyles = ` .p-icon { @@ -409,7 +456,9 @@ const commonStyle = ` } ${buttonStyles} + ${checkboxStyles} ${inputTextStyles} + ${radioButtonStyles} ${iconStyles} } `; diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js index 68a59c8101..8227022d8b 100644 --- a/components/lib/inputswitch/InputSwitchBase.js +++ b/components/lib/inputswitch/InputSwitchBase.js @@ -11,6 +11,30 @@ const classes = { slider: 'p-inputswitch-slider' }; +const styles = ` +@layer primereact { + .p-inputswitch { + position: relative; + display: inline-block; + } + + .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%; + } +} +`; export const InputSwitchBase = ComponentBase.extend({ defaultProps: { @@ -35,6 +59,7 @@ export const InputSwitchBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js index 36f53ddae4..5704c26fc6 100644 --- a/components/lib/radiobutton/RadioButtonBase.js +++ b/components/lib/radiobutton/RadioButtonBase.js @@ -17,6 +17,36 @@ const classes = { icon: 'p-radiobutton-icon' }; +const styles = ` +@layer primereact { + .p-radiobutton { + display: inline-flex; + cursor: pointer; + user-select: none; + vertical-align: bottom; + } + + .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(.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton-box.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1.0, 1.0); + visibility: visible; + } +} +`; + export const RadioButtonBase = ComponentBase.extend({ defaultProps: { __TYPE: 'RadioButton', @@ -39,6 +69,7 @@ export const RadioButtonBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 3aa2ee5033..f4d0f37f2b 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #383838; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -752,7 +733,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #383838; - background: #121212; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #64b5f6; background: #64b5f6; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #64b5f6; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #2396f2; background: #2396f2; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #64b5f6; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #2396f2; + background: #2396f2; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #383838; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #64b5f6; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #383838; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #2396f2; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #64b5f6; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #383838; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #2396f2; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #383838; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #64b5f6; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #383838; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #383838; 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); @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #64b5f6; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #43a5f4; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #64b5f6; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #43a5f4; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #383838; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #383838; background: #121212; @@ -1797,7 +1682,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #64b5f6; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #64b5f6; background: #64b5f6; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #64b5f6; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #2396f2; background: #2396f2; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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 1px #93cbf9; - border-color: #64b5f6; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #383838; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #64b5f6; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #2396f2; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #383838; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #64b5f6; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #383838; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } - .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 #383838; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; 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 { + .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-highlight .p-button { - background: #64b5f6; - border-color: #64b5f6; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: #383838; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #64b5f6; + border-color: #64b5f6; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #43a5f4; border-color: #43a5f4; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64b5f6; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } - .p-metergroup .p-metergroup-meter-container { - background: #383838; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #64b5f6; - } - .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: #64b5f6; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index ad17c5b580..ba69e82390 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #383838; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -752,7 +733,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #383838; - background: #121212; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #81c784; background: #81c784; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #81c784; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #54b358; background: #54b358; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #81c784; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #54b358; + background: #54b358; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #383838; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #81c784; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #383838; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #54b358; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #81c784; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #383838; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #54b358; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #383838; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #81c784; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #383838; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #383838; 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); @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #81c784; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #6abd6e; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #81c784; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #6abd6e; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #383838; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #383838; background: #121212; @@ -1797,7 +1682,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #81c784; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #81c784; background: #81c784; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #81c784; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #54b358; background: #54b358; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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 1px #a7d8a9; - border-color: #81c784; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #383838; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #81c784; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #54b358; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #383838; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #81c784; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #383838; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } - .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 #383838; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; 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 { + .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-highlight .p-button { - background: #81c784; - border-color: #81c784; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: #383838; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #81c784; + border-color: #81c784; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #6abd6e; border-color: #6abd6e; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81c784; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } - .p-metergroup .p-metergroup-meter-container { - background: #383838; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #81c784; - } - .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: #81c784; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 7bec50bb6e..e591e7aa8d 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #383838; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -752,7 +733,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #383838; - background: #121212; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #ffd54f; background: #ffd54f; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #ffd54f; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #ffc50c; background: #ffc50c; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #ffd54f; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #ffc50c; + background: #ffc50c; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #383838; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #ffd54f; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #383838; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ffc50c; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #ffd54f; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #383838; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ffc50c; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #383838; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #ffd54f; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #383838; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #383838; 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); @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #ffd54f; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #ffcd2e; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #ffd54f; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #ffcd2e; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #383838; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #383838; background: #121212; @@ -1797,7 +1682,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #ffd54f; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #ffd54f; background: #ffd54f; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #ffd54f; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #ffc50c; background: #ffc50c; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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 1px #ffe284; - border-color: #ffd54f; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #383838; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffd54f; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffc50c; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #383838; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ffd54f; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #383838; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } - .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 #383838; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; 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 { + .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-highlight .p-button { - background: #ffd54f; - border-color: #ffd54f; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: #383838; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #ffd54f; + border-color: #ffd54f; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #ffcd2e; border-color: #ffcd2e; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #ffd54f; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } - .p-metergroup .p-metergroup-meter-container { - background: #383838; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #ffd54f; - } - .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: #ffd54f; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index c3f40a2a98..8e73324138 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #3f4b5b; - border-radius: 4px; - } .p-checkbox .p-checkbox-box { border: 1px solid #3f4b5b; background: #20262e; @@ -752,7 +733,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -763,85 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #3f4b5b; - background: #20262e; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 4px; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.15s; - color: #151515; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #8dd0ff; background: #8dd0ff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #3f4b5b; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #1dadff; background: #1dadff; color: #151515; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #3f4b5b; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #1dadff; + background: #1dadff; + color: #151515; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f19ea6; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #3f4b5b; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #8dd0ff; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #3f4b5b; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #1dadff; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3f4b5b; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #8dd0ff; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #3f4b5b; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1dadff; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #3f4b5b; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #8dd0ff; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #3f4b5b; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #1dadff; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 4px; - } .p-inputswitch .p-inputswitch-slider { background: #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1247,25 +1167,27 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #8dd0ff; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #151515; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + } + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #3f4b5b; } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #8dd0ff; } - .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 1px #e3f3fe; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #151515; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #8dd0ff; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f19ea6; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #9fdaa8; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #3f4b5b; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #3f4b5b; background: #20262e; @@ -1800,7 +1685,15 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #3f4b5b; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.15s; background-color: #151515; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #8dd0ff; background: #8dd0ff; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #3f4b5b; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #1dadff; background: #1dadff; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #151515; - } - .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 1px #e3f3fe; - border-color: #8dd0ff; + color: #151515; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f19ea6; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #3f4b5b; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #8dd0ff; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3f4b5b; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #1dadff; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #3f4b5b; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #8dd0ff; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #3f4b5b; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1dadff; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } - .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 #6c757d; - border-radius: 4px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; color: #ffffff; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - 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: #ffffff; } - .p-togglebutton.p-highlight .p-button { - background: #545b62; - border-color: #4e555b; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #5a6268; + border-color: #545b62; color: #ffffff; } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: #ffffff; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #5a6268; - border-color: #545b62; + .p-togglebutton.p-button.p-highlight { + background: #545b62; + border-color: #4e555b; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight:hover { background: #545b62; border-color: #4e555b; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - border-color: #8dd0ff; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f19ea6; } .p-button { @@ -2612,54 +2446,6 @@ border-color: transparent; color: #f19ea6; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #20262e; - background: #ffffff; - border: 1px solid #ffffff; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #d2d4d5; - color: #20262e; - border-color: #d2d4d5; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #bcbec0; - color: #20262e; - border-color: #bcbec0; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #8dd0ff; background: transparent; @@ -6437,64 +6223,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } - .p-metergroup .p-metergroup-meter-container { - background: #3f4b5b; - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #8dd0ff; - } - .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: #8dd0ff; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .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; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 359c8467fd..b8d33e02c2 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -722,46 +722,8 @@ background-color: #efefef; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 20px; - height: 20px; - } - .p-checkbox .p-checkbox-input { - border: 2px solid #ced4da; - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid #ced4da; - background: #ffffff; width: 20px; height: 20px; - color: #212529; - border-radius: 4px; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.15s; - 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 #ced4da; @@ -771,7 +733,6 @@ color: #212529; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -782,66 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #007bff; background: #007bff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #ced4da; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #0062cc; background: #0062cc; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #ced4da; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #0062cc; + background: #0062cc; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #dc3545; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #efefef; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #007bff; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #efefef; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0062cc; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #efefef; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #007bff; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #efefef; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0062cc; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #efefef; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #007bff; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #efefef; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0062cc; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 4px; - } .p-inputswitch .p-inputswitch-slider { background: #ced4da; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1247,25 +1167,27 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #007bff; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + } + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #ced4da; } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #007bff; } - .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(38, 143, 255, 0.5); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #007bff; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #dc3545; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #28a745; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #ced4da; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #ced4da; background: #ffffff; @@ -1800,7 +1685,15 @@ color: #212529; border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #ced4da; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.15s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #007bff; background: #007bff; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #ced4da; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #0062cc; background: #0062cc; - } - .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 rgba(38, 143, 255, 0.5); - border-color: #007bff; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #dc3545; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #efefef; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #007bff; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #efefef; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #0062cc; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #efefef; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #007bff; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #efefef; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0062cc; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #efefef; } - .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 #6c757d; - border-radius: 4px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; color: #ffffff; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - 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: #ffffff; } - .p-togglebutton.p-highlight .p-button { - background: #545b62; - border-color: #4e555b; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #5a6268; + border-color: #545b62; color: #ffffff; } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: #ffffff; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #5a6268; - border-color: #545b62; + .p-togglebutton.p-button.p-highlight { + background: #545b62; + border-color: #4e555b; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight:hover { background: #545b62; border-color: #4e555b; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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(38, 143, 255, 0.5); - border-color: #007bff; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #dc3545; } .p-button { @@ -2612,54 +2446,6 @@ border-color: transparent; color: #dc3545; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; - background: #212529; - border: 1px solid #212529; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #343a40; - color: #ffffff; - border-color: #343a40; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #495057; - color: #ffffff; - border-color: #495057; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #212529; - border: 1px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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(33, 37, 41, 0.04); - color: #212529; - border: 1px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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(33, 37, 41, 0.16); - color: #212529; - border: 1px solid; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { - background-color: transparent; - color: #212529; - border-color: transparent; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.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(33, 37, 41, 0.04); - border-color: transparent; - color: #212529; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.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(33, 37, 41, 0.16); - border-color: transparent; - color: #212529; - } .p-button.p-button-link { color: #007bff; background: transparent; @@ -6437,64 +6223,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } - .p-metergroup .p-metergroup-meter-container { - background: #e9ecef; - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #007bff; - } - .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: #007bff; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .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; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 47767c965b..7809f02929 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -722,46 +722,8 @@ background-color: #faf9f8; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 20px; - height: 20px; - } - .p-checkbox .p-checkbox-input { - border: 1px solid #605e5c; - border-radius: 2px; - } - .p-checkbox .p-checkbox-box { - border: 1px solid #605e5c; - background: #ffffff; width: 20px; height: 20px; - color: #323130; - border-radius: 2px; - 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: 1px solid #605e5c; @@ -771,7 +733,6 @@ color: #323130; border-radius: 2px; 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; @@ -782,61 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #0078d4; background: #0078d4; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #323130; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #005a9e; background: #005a9e; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #323130; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #005a9e; + background: #005a9e; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a4252c; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #faf9f8; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #0078d4; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #faf9f8; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005a9e; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #faf9f8; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #0078d4; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #faf9f8; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005a9e; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #faf9f8; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #0078d4; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #faf9f8; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005a9e; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #ffffff; 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: #605e5c; @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #0078d4; + .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: inset 0 0 0 1px #605e5c; } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #ffffff; - transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #0078d4; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { background: #ffffff; } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #005a9e; } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a4252c; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #498205; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #605e5c; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #605e5c; background: #ffffff; @@ -1797,7 +1682,15 @@ color: #323130; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #323130; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #0078d4; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #0078d4; background: #ffffff; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #323130; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #005a9e; background: #ffffff; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #005a9e; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - border-color: #0078d4; + color: #005a9e; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a4252c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #faf9f8; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #faf9f8; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffffff; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #faf9f8; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #faf9f8; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #323130; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #a4252c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } - .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 #605e5c; - border-radius: 2px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #605e5c; color: #323130; 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: #605e5c; } - .p-togglebutton.p-highlight .p-button { - background: #edebe9; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f3f2f1; border-color: #605e5c; color: #323130; } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #323130; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + color: #605e5c; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #f3f2f1; + .p-togglebutton.p-button.p-highlight { + background: #edebe9; border-color: #605e5c; color: #323130; } - .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: #605e5c; + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #323130; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight:hover { background: #edebe9; border-color: #605e5c; color: #323130; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #323130; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - border-color: #0078d4; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #a4252c; } .p-button { @@ -6331,64 +6165,6 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } - .p-metergroup .p-metergroup-meter-container { - background: #edebe9; - border-radius: 2px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #0078d4; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 2px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #0078d4; - 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: 2px; - border-bottom-left-radius: 2px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - .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: 2px; - border-top-right-radius: 2px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 2px; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 02dcfc55cb..03f46db27a 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -739,46 +739,8 @@ background-color: #424b57; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; 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-checkbox-box { border: 2px solid #424b57; @@ -788,7 +750,6 @@ 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; @@ -799,61 +760,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #fbbf24; background: #fbbf24; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #fbbf24; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #fde68a; background: #fde68a; color: #030712; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #fbbf24; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #fde68a; + background: #fde68a; + 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: #fbbf24; - } - .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: #fde68a; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #fbbf24; - } - .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-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #fde68a; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #424b57; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #fbbf24; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #424b57; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #fde68a; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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); @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #fbbf24; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #030712; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #fcd34d; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #fbbf24; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #030712; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #fcd34d; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #fbbf24; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #fbbf24; background: #fbbf24; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #fbbf24; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #fde68a; background: #fde68a; - } - .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(251, 191, 36, 0.2); - border-color: #fbbf24; + color: #030712; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #424b57; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #fbbf24; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #fde68a; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #fbbf24; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #fde68a; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); @@ -2111,66 +1967,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 { + .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-highlight .p-button { - background: #fbbf24; - border-color: #fbbf24; - color: #030712; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #030712; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .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: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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #fbbf24; + border-color: #fbbf24; + color: #030712; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #030712; + } + .p-togglebutton.p-button.p-highlight:hover { background: #fcd34d; border-color: #fcd34d; color: #030712; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } - .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(251, 191, 36, 0.2); - border-color: #fbbf24; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #f87171; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #fbbf24; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } - .p-metergroup .p-metergroup-meter-container { - background: #424b57; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #fbbf24; - } - .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: #fbbf24; - 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; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 2b4a3a2a57..ef8586f593 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -739,46 +739,8 @@ background-color: #424b57; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; 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-checkbox-box { border: 2px solid #424b57; @@ -788,7 +750,6 @@ 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; @@ -799,61 +760,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #60a5fa; background: #60a5fa; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #60a5fa; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #bfdbfe; background: #bfdbfe; color: #030712; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #60a5fa; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #bfdbfe; + background: #bfdbfe; + 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: #60a5fa; - } - .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: #bfdbfe; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #60a5fa; - } - .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-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #bfdbfe; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #424b57; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #60a5fa; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #424b57; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #bfdbfe; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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); @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #60a5fa; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #030712; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #93c5fd; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #60a5fa; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #030712; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #93c5fd; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #60a5fa; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #60a5fa; background: #60a5fa; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #60a5fa; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #bfdbfe; background: #bfdbfe; - } - .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(96, 165, 250, 0.2); - border-color: #60a5fa; + color: #030712; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #424b57; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #60a5fa; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #bfdbfe; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #60a5fa; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #bfdbfe; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -2111,66 +1967,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 { + .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-highlight .p-button { - background: #60a5fa; - border-color: #60a5fa; - color: #030712; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #030712; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .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: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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #60a5fa; + border-color: #60a5fa; + color: #030712; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #030712; + } + .p-togglebutton.p-button.p-highlight:hover { background: #93c5fd; border-color: #93c5fd; color: #030712; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } - .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(96, 165, 250, 0.2); - border-color: #60a5fa; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #f87171; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #60a5fa; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } - .p-metergroup .p-metergroup-meter-container { - background: #424b57; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #60a5fa; - } - .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: #60a5fa; - 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; diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index beb05c7cb9..ebb8d6400b 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -739,46 +739,8 @@ background-color: #424b57; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; 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-checkbox-box { border: 2px solid #424b57; @@ -788,7 +750,6 @@ 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; @@ -799,61 +760,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #22d3ee; background: #22d3ee; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #22d3ee; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #a5f3fc; background: #a5f3fc; color: #030712; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #22d3ee; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #a5f3fc; + background: #a5f3fc; + 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: #22d3ee; - } - .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: #a5f3fc; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #22d3ee; - } - .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-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #a5f3fc; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #424b57; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #22d3ee; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #424b57; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a5f3fc; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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); @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #22d3ee; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #030712; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #67e8f9; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #22d3ee; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #030712; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #67e8f9; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #22d3ee; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #22d3ee; background: #22d3ee; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #22d3ee; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #a5f3fc; background: #a5f3fc; - } - .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(34, 211, 238, 0.2); - border-color: #22d3ee; + color: #030712; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #424b57; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #22d3ee; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #a5f3fc; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #22d3ee; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a5f3fc; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); @@ -2111,66 +1967,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 { + .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-highlight .p-button { - background: #22d3ee; - border-color: #22d3ee; - color: #030712; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #030712; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .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: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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #22d3ee; + border-color: #22d3ee; + color: #030712; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #030712; + } + .p-togglebutton.p-button.p-highlight:hover { background: #67e8f9; border-color: #67e8f9; color: #030712; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } - .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(34, 211, 238, 0.2); - border-color: #22d3ee; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #f87171; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #22d3ee; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } - .p-metergroup .p-metergroup-meter-container { - background: #424b57; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #22d3ee; - } - .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: #22d3ee; - 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; diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 04ef211f7c..710ca089f2 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -739,46 +739,8 @@ background-color: #424b57; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; 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-checkbox-box { border: 2px solid #424b57; @@ -788,7 +750,6 @@ 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; @@ -799,61 +760,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #34d399; background: #34d399; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #34d399; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #a7f3d0; background: #a7f3d0; color: #030712; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #34d399; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #a7f3d0; + background: #a7f3d0; + 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: #34d399; - } - .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: #a7f3d0; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #34d399; - } - .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-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #a7f3d0; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #424b57; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #34d399; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #424b57; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a7f3d0; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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); @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #34d399; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #030712; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #6ee7b7; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #34d399; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #030712; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #6ee7b7; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #34d399; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #34d399; background: #34d399; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #34d399; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #a7f3d0; background: #a7f3d0; - } - .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(52, 211, 153, 0.2); - border-color: #34d399; + color: #030712; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #424b57; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #34d399; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #a7f3d0; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #34d399; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a7f3d0; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); @@ -2111,66 +1967,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 { + .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-highlight .p-button { - background: #34d399; - border-color: #34d399; - color: #030712; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #030712; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .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: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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #34d399; + border-color: #34d399; + color: #030712; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #030712; + } + .p-togglebutton.p-button.p-highlight:hover { background: #6ee7b7; border-color: #6ee7b7; color: #030712; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } - .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(52, 211, 153, 0.2); - border-color: #34d399; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #f87171; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #34d399; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } - .p-metergroup .p-metergroup-meter-container { - background: #424b57; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #34d399; - } - .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: #34d399; - 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; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 0a3507ff51..8775095ca4 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -739,46 +739,8 @@ background-color: #424b57; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; 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-checkbox-box { border: 2px solid #424b57; @@ -788,7 +750,6 @@ 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; @@ -799,61 +760,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #818cf8; background: #818cf8; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #818cf8; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #c7d2fe; background: #c7d2fe; color: #030712; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #818cf8; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #c7d2fe; + background: #c7d2fe; + 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: #818cf8; - } - .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: #c7d2fe; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #818cf8; - } - .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-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #c7d2fe; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #424b57; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #818cf8; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #424b57; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #c7d2fe; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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); @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #818cf8; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #030712; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #a5b4fc; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #818cf8; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #030712; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #a5b4fc; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #818cf8; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #818cf8; background: #818cf8; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #818cf8; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #c7d2fe; background: #c7d2fe; - } - .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(129, 140, 248, 0.2); - border-color: #818cf8; + color: #030712; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #424b57; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #818cf8; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #c7d2fe; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #818cf8; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #c7d2fe; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -2111,66 +1967,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 { + .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-highlight .p-button { - background: #818cf8; - border-color: #818cf8; - color: #030712; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #030712; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .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: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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #818cf8; + border-color: #818cf8; + color: #030712; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #030712; + } + .p-togglebutton.p-button.p-highlight:hover { background: #a5b4fc; border-color: #a5b4fc; color: #030712; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } - .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(129, 140, 248, 0.2); - border-color: #818cf8; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #f87171; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #818cf8; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } - .p-metergroup .p-metergroup-meter-container { - background: #424b57; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #818cf8; - } - .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: #818cf8; - 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; diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 073033eed9..d19ccaa6b9 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -739,46 +739,8 @@ background-color: #424b57; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; 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-checkbox-box { border: 2px solid #424b57; @@ -788,7 +750,6 @@ 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; @@ -799,61 +760,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #f472b6; background: #f472b6; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #f472b6; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #fbcfe8; background: #fbcfe8; color: #030712; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #f472b6; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #fbcfe8; + background: #fbcfe8; + 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: #f472b6; - } - .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: #fbcfe8; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #f472b6; - } - .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-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #fbcfe8; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #424b57; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #f472b6; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #424b57; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #fbcfe8; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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); @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #f472b6; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #030712; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #f9a8d4; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #f472b6; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #030712; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #f9a8d4; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #f472b6; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #f472b6; background: #f472b6; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #f472b6; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #fbcfe8; background: #fbcfe8; - } - .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(244, 114, 182, 0.2); - border-color: #f472b6; + color: #030712; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #424b57; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #f472b6; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #fbcfe8; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #f472b6; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #fbcfe8; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); @@ -2111,66 +1967,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 { + .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-highlight .p-button { - background: #f472b6; - border-color: #f472b6; - color: #030712; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #030712; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .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: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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #f472b6; + border-color: #f472b6; + color: #030712; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #030712; + } + .p-togglebutton.p-button.p-highlight:hover { background: #f9a8d4; border-color: #f9a8d4; color: #030712; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } - .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(244, 114, 182, 0.2); - border-color: #f472b6; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #f87171; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #f472b6; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } - .p-metergroup .p-metergroup-meter-container { - background: #424b57; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #f472b6; - } - .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: #f472b6; - 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; diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index ff54cdb164..dc7162cce9 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -739,46 +739,8 @@ background-color: #424b57; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; 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-checkbox-box { border: 2px solid #424b57; @@ -788,7 +750,6 @@ 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; @@ -799,61 +760,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #2dd4bf; background: #2dd4bf; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #2dd4bf; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #99f6e4; background: #99f6e4; color: #030712; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #2dd4bf; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #99f6e4; + background: #99f6e4; + 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: #2dd4bf; - } - .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: #99f6e4; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #2dd4bf; - } - .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-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #99f6e4; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #424b57; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #2dd4bf; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #424b57; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #99f6e4; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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); @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #2dd4bf; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #030712; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #5eead4; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #2dd4bf; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #030712; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #5eead4; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #2dd4bf; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #2dd4bf; background: #2dd4bf; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #2dd4bf; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #99f6e4; background: #99f6e4; - } - .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(45, 212, 191, 0.2); - border-color: #2dd4bf; + color: #030712; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #424b57; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #2dd4bf; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #99f6e4; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #2dd4bf; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #99f6e4; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -2111,66 +1967,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 { + .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-highlight .p-button { - background: #2dd4bf; - border-color: #2dd4bf; - color: #030712; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #030712; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .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: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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #2dd4bf; + border-color: #2dd4bf; + color: #030712; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #030712; + } + .p-togglebutton.p-button.p-highlight:hover { background: #5eead4; border-color: #5eead4; color: #030712; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } - .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(45, 212, 191, 0.2); - border-color: #2dd4bf; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #f87171; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #2dd4bf; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } - .p-metergroup .p-metergroup-meter-container { - background: #424b57; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #2dd4bf; - } - .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: #2dd4bf; - 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; diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index d59bfc6513..cf8d173f99 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -738,29 +738,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; @@ -769,7 +750,6 @@ 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; @@ -780,80 +760,42 @@ width: 14px; height: 14px; } - .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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #f59e0b; background: #f59e0b; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #f59e0b; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #b45309; background: #b45309; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #f59e0b; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; border-color: #f59e0b; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #b45309; + background: #b45309; + 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: #f59e0b; - } - .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: #b45309; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #f59e0b; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #b45309; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f3f4f6; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #f59e0b; - } - .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 { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #b45309; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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; @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #f59e0b; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #d97706; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #f59e0b; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #d97706; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #f59e0b; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #f59e0b; background: #f59e0b; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #f59e0b; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #b45309; background: #b45309; - } - .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 #fef08a; - border-color: #f59e0b; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f3f4f6; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #f59e0b; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #b45309; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #f59e0b; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #b45309; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; @@ -2111,66 +1967,44 @@ .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-highlight .p-button { - background: #f59e0b; - border-color: #f59e0b; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { 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 { + .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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #f59e0b; + border-color: #f59e0b; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #d97706; border-color: #d97706; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #fef08a; - border-color: #f59e0b; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #ef4444; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #b45309; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #f59e0b; - } - .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: #f59e0b; - 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; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 05595a9080..2c9e24fe47 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -738,29 +738,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; @@ -769,7 +750,6 @@ 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; @@ -780,80 +760,42 @@ width: 14px; height: 14px; } - .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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #3b82f6; background: #3b82f6; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #3b82f6; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #1d4ed8; background: #1d4ed8; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #3b82f6; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; border-color: #3b82f6; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #1d4ed8; + background: #1d4ed8; + 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: #3b82f6; - } - .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: #1d4ed8; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #3b82f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #1d4ed8; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f3f4f6; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3b82f6; - } - .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 { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1d4ed8; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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; @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #3b82f6; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #2563eb; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #3b82f6; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #2563eb; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #3b82f6; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + border-color: #3b82f6; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #3b82f6; background: #3b82f6; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #3b82f6; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #1d4ed8; background: #1d4ed8; - } - .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 #bfdbfe; - border-color: #3b82f6; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f3f4f6; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #3b82f6; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #1d4ed8; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #3b82f6; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1d4ed8; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; @@ -2111,66 +1967,44 @@ .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-highlight .p-button { - background: #3b82f6; - border-color: #3b82f6; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { 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 { + .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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #3b82f6; + border-color: #3b82f6; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #bfdbfe; - border-color: #3b82f6; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #ef4444; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #1d4ed8; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #3b82f6; - } - .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: #3b82f6; - 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; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index f83371e29a..16dd45a914 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -738,29 +738,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; @@ -769,7 +750,6 @@ 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; @@ -780,80 +760,42 @@ width: 14px; height: 14px; } - .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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #06b6d4; background: #06b6d4; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #06b6d4; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #0e7490; background: #0e7490; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #06b6d4; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; border-color: #06b6d4; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #0e7490; + background: #0e7490; + 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: #06b6d4; - } - .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: #0e7490; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #06b6d4; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0e7490; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f3f4f6; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #06b6d4; - } - .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 { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0e7490; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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; @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #06b6d4; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #0891b2; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #06b6d4; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #0891b2; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #06b6d4; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #06b6d4; background: #06b6d4; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #06b6d4; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #0e7490; background: #0e7490; - } - .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 #a5f3fc; - border-color: #06b6d4; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f3f4f6; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #06b6d4; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #0e7490; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #06b6d4; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e7490; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; @@ -2111,66 +1967,44 @@ .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-highlight .p-button { - background: #06b6d4; - border-color: #06b6d4; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { 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 { + .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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #06b6d4; + border-color: #06b6d4; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #0891b2; border-color: #0891b2; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #a5f3fc; - border-color: #06b6d4; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #ef4444; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #0e7490; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #06b6d4; - } - .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: #06b6d4; - 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; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 3111c6b508..425562dead 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -738,29 +738,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; @@ -769,7 +750,6 @@ 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; @@ -780,80 +760,42 @@ width: 14px; height: 14px; } - .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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #10b981; background: #10b981; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #10b981; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #047857; background: #047857; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #10b981; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #047857; + background: #047857; + 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: #10b981; - } - .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: #047857; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #10b981; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #047857; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f3f4f6; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #10b981; - } - .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 { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #047857; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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; @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #10b981; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #059669; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #10b981; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #059669; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #10b981; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #10b981; background: #10b981; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #10b981; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #047857; background: #047857; - } - .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 #a7f3d0; - border-color: #10b981; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f3f4f6; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #10b981; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #047857; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #10b981; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #047857; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; @@ -2111,66 +1967,44 @@ .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-highlight .p-button { - background: #10b981; - border-color: #10b981; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { 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 { + .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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #10b981; + border-color: #10b981; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #059669; border-color: #059669; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #a7f3d0; - border-color: #10b981; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #ef4444; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #047857; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #10b981; - } - .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: #10b981; - 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; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index d4c4ad1d15..429a4e4ad7 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -738,29 +738,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; @@ -769,7 +750,6 @@ 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; @@ -780,80 +760,42 @@ width: 14px; height: 14px; } - .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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #6366f1; background: #6366f1; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #6366f1; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #4338ca; background: #4338ca; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #6366f1; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; border-color: #6366f1; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #4338ca; + background: #4338ca; + 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: #6366f1; - } - .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: #4338ca; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #6366f1; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #4338ca; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f3f4f6; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #6366f1; - } - .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 { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4338ca; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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; @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #6366f1; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #4f46e5; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #6366f1; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #4f46e5; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #6366f1; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + border-color: #6366f1; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #6366f1; background: #6366f1; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #6366f1; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #4338ca; background: #4338ca; - } - .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 #c7d2fe; - border-color: #6366f1; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f3f4f6; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #6366f1; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #4338ca; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #6366f1; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4338ca; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; @@ -2111,66 +1967,44 @@ .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-highlight .p-button { - background: #6366f1; - border-color: #6366f1; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { 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 { + .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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #6366f1; + border-color: #6366f1; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #4f46e5; border-color: #4f46e5; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #c7d2fe; - border-color: #6366f1; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #ef4444; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #4338ca; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #6366f1; - } - .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: #6366f1; - 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; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 748ee3ef20..e05e707fea 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -738,29 +738,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; @@ -769,7 +750,6 @@ 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; @@ -780,80 +760,42 @@ width: 14px; height: 14px; } - .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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #ec4899; background: #ec4899; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #ec4899; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #be185d; background: #be185d; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #ec4899; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; border-color: #ec4899; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #be185d; + background: #be185d; + 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: #ec4899; - } - .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: #be185d; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #ec4899; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #be185d; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f3f4f6; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #ec4899; - } - .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 { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #be185d; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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; @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #ec4899; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #db2777; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #ec4899; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #db2777; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #ec4899; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #ec4899; background: #ec4899; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #ec4899; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #be185d; background: #be185d; - } - .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 #fbcfe8; - border-color: #ec4899; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f3f4f6; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ec4899; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #be185d; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ec4899; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #be185d; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; @@ -2111,66 +1967,44 @@ .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-highlight .p-button { - background: #ec4899; - border-color: #ec4899; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { 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 { + .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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #ec4899; + border-color: #ec4899; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #db2777; border-color: #db2777; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #fbcfe8; - border-color: #ec4899; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #ef4444; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #be185d; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #ec4899; - } - .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: #ec4899; - 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; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index b324966fd6..533d8231f8 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -738,29 +738,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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; @@ -769,7 +750,6 @@ 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; @@ -780,80 +760,42 @@ width: 14px; height: 14px; } - .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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #14b8a6; background: #14b8a6; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #14b8a6; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #0f766e; background: #0f766e; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #14b8a6; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #0f766e; + background: #0f766e; + 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: #14b8a6; - } - .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: #0f766e; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #14b8a6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0f766e; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f3f4f6; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #14b8a6; - } - .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 { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0f766e; } .p-chips { @@ -1221,36 +1163,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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; @@ -1261,25 +1181,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #14b8a6; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .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: #0d9488; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #14b8a6; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #0d9488; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1765,47 +1687,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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; @@ -1814,7 +1699,15 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #14b8a6; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1822,73 +1715,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #14b8a6; background: #14b8a6; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #14b8a6; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #0f766e; background: #0f766e; - } - .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 #99f6e4; - border-color: #14b8a6; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f3f4f6; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #14b8a6; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #0f766e; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #14b8a6; } - .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 { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0f766e; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1901,7 +1757,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -2111,66 +1967,44 @@ .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-highlight .p-button { - background: #14b8a6; - border-color: #14b8a6; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { 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 { + .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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #14b8a6; + border-color: #14b8a6; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #0d9488; border-color: #0d9488; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #99f6e4; - border-color: #14b8a6; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2620,54 +2454,6 @@ border-color: transparent; color: #ef4444; } - .p-button.p-button-contrast, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #0f766e; background: transparent; @@ -6396,64 +6182,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #14b8a6; - } - .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: #14b8a6; - 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; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index d49b40ed20..985671cf93 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #4b4b4b; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -752,7 +733,6 @@ color: #dedede; border-radius: 3px; 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; @@ -763,85 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #4b4b4b; - background: #191919; - width: 20px; - height: 20px; - color: #dedede; - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #ffe082; background: #ffe082; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #ffe082; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #ffca28; background: #ffca28; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #ffe082; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #ffe082; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #ffca28; + background: #ffca28; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #ffe082; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ffca28; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #ffe082; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #4b4b4b; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffca28; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #ffe082; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ffca28; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #4b4b4b; 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: #323232; @@ -1247,25 +1167,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #ffe082; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #323232; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #ffd54f; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #ffe082; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #323232; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #ffd54f; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #4b4b4b; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1800,7 +1685,15 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #ffe082; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #ffe082; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #ffe082; background: #ffe082; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #ffe082; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #ffca28; background: #ffca28; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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.1rem white; - border-color: #ffe082; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffe082; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffca28; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ffe082; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffca28; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; color: #dedede; 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: #888888; } - .p-togglebutton.p-highlight .p-button { - background: #ffe082; - border-color: #ffe082; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; border-color: #4c4c4c; color: #dedede; } - .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 { + .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: #dedede; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #ffe082; + border-color: #ffe082; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #ffd54f; border-color: #ffd54f; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .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.1rem white; - border-color: #ffe082; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6340,64 +6174,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-metergroup .p-metergroup-meter-container { - background: #eaeaea; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #ffe082; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #ffe082; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index f6e905298d..e939b06272 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #4b4b4b; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -752,7 +733,6 @@ color: #dedede; border-radius: 3px; 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; @@ -763,85 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #4b4b4b; - background: #191919; - width: 20px; - height: 20px; - color: #dedede; - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #81d4fa; background: #81d4fa; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #81d4fa; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #29b6f6; background: #29b6f6; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #81d4fa; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #81d4fa; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #29b6f6; + background: #29b6f6; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #81d4fa; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #29b6f6; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #81d4fa; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #4b4b4b; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #29b6f6; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #81d4fa; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #29b6f6; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #4b4b4b; 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: #323232; @@ -1247,25 +1167,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #81d4fa; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #323232; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #4fc3f7; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #81d4fa; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #323232; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #4fc3f7; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #4b4b4b; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1800,7 +1685,15 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #81d4fa; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81d4fa; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #81d4fa; background: #81d4fa; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #81d4fa; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #29b6f6; background: #29b6f6; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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.1rem white; - border-color: #81d4fa; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #81d4fa; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #29b6f6; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #81d4fa; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #29b6f6; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; color: #dedede; 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: #888888; } - .p-togglebutton.p-highlight .p-button { - background: #81d4fa; - border-color: #81d4fa; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; border-color: #4c4c4c; color: #dedede; } - .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 { + .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: #dedede; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #81d4fa; + border-color: #81d4fa; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #4fc3f7; border-color: #4fc3f7; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .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.1rem white; - border-color: #81d4fa; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6340,64 +6174,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-metergroup .p-metergroup-meter-container { - background: #eaeaea; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #81d4fa; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #81d4fa; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 9f8cb7e6a3..67a5a9ec32 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #4b4b4b; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -752,7 +733,6 @@ color: #dedede; border-radius: 3px; 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; @@ -763,85 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #4b4b4b; - background: #191919; - width: 20px; - height: 20px; - color: #dedede; - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #c5e1a5; background: #c5e1a5; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #c5e1a5; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #9ccc65; background: #9ccc65; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #c5e1a5; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #c5e1a5; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #9ccc65; + background: #9ccc65; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #c5e1a5; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9ccc65; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #c5e1a5; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #4b4b4b; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9ccc65; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #c5e1a5; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9ccc65; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #4b4b4b; 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: #323232; @@ -1247,25 +1167,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #c5e1a5; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #323232; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #aed581; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #c5e1a5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #323232; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #aed581; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #4b4b4b; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1800,7 +1685,15 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #c5e1a5; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #c5e1a5; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #c5e1a5; background: #c5e1a5; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #c5e1a5; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #9ccc65; background: #9ccc65; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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.1rem white; - border-color: #c5e1a5; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #c5e1a5; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #9ccc65; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #c5e1a5; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9ccc65; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; color: #dedede; 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: #888888; } - .p-togglebutton.p-highlight .p-button { - background: #c5e1a5; - border-color: #c5e1a5; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; border-color: #4c4c4c; color: #dedede; } - .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 { + .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: #dedede; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #c5e1a5; + border-color: #c5e1a5; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #aed581; border-color: #aed581; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .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.1rem white; - border-color: #c5e1a5; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6340,64 +6174,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-metergroup .p-metergroup-meter-container { - background: #eaeaea; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #c5e1a5; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #c5e1a5; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 9510181e5f..37758d2db3 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #4b4b4b; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -752,7 +733,6 @@ color: #dedede; border-radius: 3px; 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; @@ -763,85 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #4b4b4b; - background: #191919; - width: 20px; - height: 20px; - color: #dedede; - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #f48fb1; background: #f48fb1; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #f48fb1; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #ec407a; background: #ec407a; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #f48fb1; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #f48fb1; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #ec407a; + background: #ec407a; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #f48fb1; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ec407a; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #f48fb1; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #4b4b4b; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ec407a; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #f48fb1; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #4b4b4b; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ec407a; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #4b4b4b; 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: #323232; @@ -1247,25 +1167,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #f48fb1; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #323232; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #f06292; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #f48fb1; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #323232; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #f06292; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #4b4b4b; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1800,7 +1685,15 @@ color: #dedede; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #f48fb1; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #f48fb1; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #f48fb1; background: #f48fb1; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #f48fb1; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #ec407a; background: #ec407a; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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.1rem white; - border-color: #f48fb1; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #f48fb1; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ec407a; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #f48fb1; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #4b4b4b; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ec407a; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; color: #dedede; 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: #888888; } - .p-togglebutton.p-highlight .p-button { - background: #f48fb1; - border-color: #f48fb1; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #4c4c4c; border-color: #4c4c4c; color: #dedede; } - .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 { + .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: #dedede; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #f48fb1; + border-color: #f48fb1; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #f06292; border-color: #f06292; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .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.1rem white; - border-color: #f48fb1; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6340,64 +6174,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } - .p-metergroup .p-metergroup-meter-container { - background: #eaeaea; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #f48fb1; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #f48fb1; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index ea66eea837..7212b2f9ee 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,65 +733,26 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { width: 18px; height: 18px; } - .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); - background: #1e1e1e; - width: 18px; - height: 18px; - color: rgba(255, 255, 255, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.2s; - color: #121212; - 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 hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,126 +763,64 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #CE93D8; background: #CE93D8; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #CE93D8; background: #CE93D8; color: #121212; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #f44435; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #CE93D8; background: #CE93D8; + color: #121212; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #CE93D8; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f44435; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #CE93D8; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #CE93D8; + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #CE93D8; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; } - .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-fluid .p-chips { - display: flex; + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + gap: 0.5rem; } - .p-chips:not(.p-disabled):hover .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); } - .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - outline-color: transparent; - } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(206, 147, 216, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } - .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); - color: rgba(255, 255, 255, 0.87); - } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -954,90 +853,11 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } - .p-dropdown { - 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: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1048,18 +868,6 @@ box-shadow: none; border-color: #CE93D8; } - .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); - } - .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .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: 2rem; } @@ -1070,7 +878,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -1097,7 +905,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1112,6 +920,13 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { + padding-right: 4rem; + margin-right: -4rem; + } + .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { + right: 3rem; + } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -1124,27 +939,13 @@ transition: none; 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: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(206, 147, 216, 0.24); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - position: relative; - margin-left: -0.5rem; - margin-right: 0.5rem; + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1158,17 +959,29 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1224,36 +1037,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1264,25 +1055,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #CE93D8; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: none; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: hsla(0deg, 0%, 100%, 0.3); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: rgba(206, 147, 216, 0.5); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #CE93D8; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(206, 147, 216, 0.5); + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1292,7 +1085,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1359,13 +1152,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1375,44 +1168,15 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } - .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: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1428,7 +1192,6 @@ } .p-listbox .p-listbox-list { padding: 0; - outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1438,16 +1201,15 @@ transition: none; 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: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1460,26 +1222,9 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(206, 147, 216, 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: hsla(0, 0%, 100%, 0.04); - } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); - } - .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: hsla(0, 0%, 100%, 0.04); - } - .p-listbox.p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-invalid { border-color: #f44435; @@ -1505,106 +1250,17 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 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: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1615,14 +1271,8 @@ box-shadow: none; border-color: #CE93D8; } - .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); - } - .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + .p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 2rem; } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1634,7 +1284,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1648,12 +1298,22 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect .p-multiselect-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 2.357rem; + } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { + padding: 1rem 1rem; + } + .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 2rem; + } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1663,13 +1323,16 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; border-top-right-radius: 4px; border-top-left-radius: 4px; } + .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: 2rem; } @@ -1677,11 +1340,7 @@ right: 1rem; 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: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -1712,22 +1371,18 @@ transition: none; 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: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(206, 147, 216, 0.24); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1744,6 +1399,15 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1768,56 +1432,27 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 hsla(0, 0%, 100%, 0.7); - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,51 +1460,31 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #CE93D8; background: #121212; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #CE93D8; background: #121212; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #CE93D8; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + color: #CE93D8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #121212; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #121212; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #121212; + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #121212; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } .p-rating { @@ -1959,7 +1574,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1999,7 +1614,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2025,7 +1640,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2055,7 +1670,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2106,74 +1721,52 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .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 rgba(255, 255, 255, 0.12); - border-radius: 4px; + background-color: hsla(0deg, 0%, 100%, 0.1); } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #1c1c1c; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #373737; + .p-togglebutton.p-button.p-highlight { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .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 { + .p-togglebutton.p-button.p-highlight:hover { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2623,54 +2216,6 @@ border-color: transparent; color: #ef9a9a; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #121212; - background: #ffffff; - border: 1px solid #ffffff; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #d0d0d0; - color: #121212; - border-color: #d0d0d0; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #b8b8b8; - color: #121212; - border-color: #b8b8b8; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #ffffff; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.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-buttonset.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-buttonset.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: #CE93D8; background: transparent; @@ -3493,7 +3038,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3501,12 +3046,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3515,7 +3060,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3579,12 +3124,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3597,10 +3142,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3764,12 +3309,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3842,11 +3387,11 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4258,7 +3803,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4268,7 +3813,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4330,10 +3875,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4341,7 +3886,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4756,7 +4301,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4777,7 +4322,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4919,7 +4464,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4959,7 +4504,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5020,7 +4565,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5070,7 +4615,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5157,7 +4702,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5192,7 +4737,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5272,7 +4817,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5300,7 +4845,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5329,7 +4874,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5395,7 +4940,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5445,7 +4990,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5606,7 +5151,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5630,7 +5175,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5707,7 +5252,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5748,7 +5293,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5798,7 +5343,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5904,7 +5449,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5925,7 +5470,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6316,7 +5861,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6342,7 +5887,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6448,64 +5993,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(206, 147, 216, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #CE93D8; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #CE93D8; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6644,8 +6131,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6655,13 +6142,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6858,39 +6345,8 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(255, 255, 255, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(255, 255, 255, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(255, 255, 255, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(255, 255, 255, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(255, 255, 255, 0.16); - } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6940,7 +6396,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6967,8 +6423,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6978,13 +6434,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7045,8 +6501,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7056,13 +6512,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7101,15 +6557,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7169,8 +6625,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7180,13 +6636,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7256,8 +6712,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7267,13 +6723,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7319,20 +6775,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7352,8 +6808,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7469,9 +6925,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7498,8 +6951,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7509,13 +6962,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7663,10 +7116,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7908,8 +7361,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7919,13 +7372,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index ef94a16cb4..c836ad32c2 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,65 +733,26 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 18px; - height: 18px; - } - .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); - background: #1e1e1e; width: 18px; height: 18px; - color: rgba(255, 255, 255, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.2s; - color: #121212; - 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 hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,61 +763,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #9FA8DA; background: #9FA8DA; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #9FA8DA; background: #9FA8DA; color: #121212; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #f44435; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #9FA8DA; background: #9FA8DA; + color: #121212; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9FA8DA; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f44435; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #9FA8DA; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9FA8DA; + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #9FA8DA; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } .p-chips { @@ -914,12 +856,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: hsla(0deg, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1034,7 +976,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1049,13 +991,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1097,7 +1039,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1139,7 +1081,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1161,14 +1103,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1224,36 +1166,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1264,25 +1184,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #9FA8DA; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: none; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: hsla(0deg, 0%, 100%, 0.3); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: rgba(159, 168, 218, 0.5); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #9FA8DA; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(159, 168, 218, 0.5); + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1292,7 +1214,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1359,13 +1281,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1405,14 +1327,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1465,15 +1387,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .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: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1505,7 +1427,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1601,7 +1523,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1616,13 +1538,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1634,7 +1556,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1663,7 +1585,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1727,7 +1649,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1768,56 +1690,27 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 hsla(0, 0%, 100%, 0.7); - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,73 +1718,36 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #9FA8DA; background: #121212; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #9FA8DA; background: #121212; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #9FA8DA; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + color: #9FA8DA; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #121212; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #121212; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #121212; + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #121212; } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1904,7 +1760,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1959,7 +1815,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1999,7 +1855,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2025,7 +1881,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2055,7 +1911,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2106,74 +1962,52 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .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 rgba(255, 255, 255, 0.12); - border-radius: 4px; + background-color: hsla(0deg, 0%, 100%, 0.1); } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #1c1c1c; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #373737; + .p-togglebutton.p-button.p-highlight { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .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 { + .p-togglebutton.p-button.p-highlight:hover { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2623,54 +2457,6 @@ border-color: transparent; color: #ef9a9a; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #121212; - background: #ffffff; - border: 1px solid #ffffff; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #d0d0d0; - color: #121212; - border-color: #d0d0d0; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #b8b8b8; - color: #121212; - border-color: #b8b8b8; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #ffffff; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.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-buttonset.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-buttonset.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: #9FA8DA; background: transparent; @@ -3493,7 +3279,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3501,12 +3287,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3515,7 +3301,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3579,12 +3365,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3597,10 +3383,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3764,12 +3550,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3842,11 +3628,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4258,7 +4044,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4268,7 +4054,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4330,10 +4116,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4341,7 +4127,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4756,7 +4542,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4777,7 +4563,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4919,7 +4705,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4959,7 +4745,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5020,7 +4806,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5070,7 +4856,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5157,7 +4943,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5192,7 +4978,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5272,7 +5058,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5300,7 +5086,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5329,7 +5115,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5395,7 +5181,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5445,7 +5231,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5606,7 +5392,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5630,7 +5416,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5707,7 +5493,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5748,7 +5534,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5798,7 +5584,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5904,7 +5690,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5925,7 +5711,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6316,7 +6102,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6342,7 +6128,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6448,64 +6234,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(159, 168, 218, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #9FA8DA; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #9FA8DA; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6644,8 +6372,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6655,13 +6383,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6858,39 +6586,8 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(255, 255, 255, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(255, 255, 255, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(255, 255, 255, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(255, 255, 255, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(255, 255, 255, 0.16); - } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6940,7 +6637,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6967,8 +6664,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6978,13 +6675,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7045,8 +6742,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7056,13 +6753,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7101,15 +6798,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7169,8 +6866,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7180,13 +6877,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7256,8 +6953,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7267,13 +6964,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7319,20 +7016,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7352,8 +7049,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7469,9 +7166,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7498,8 +7192,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7509,13 +7203,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7663,10 +7357,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7908,8 +7602,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7919,13 +7613,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index fdfdee4a77..fe0d03456a 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -742,46 +742,8 @@ background-color: #dcdcdc; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 18px; - height: 18px; - } - .p-checkbox .p-checkbox-input { - border: 2px solid #757575; - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid #757575; - background: #ffffff; width: 18px; height: 18px; - color: rgba(0, 0, 0, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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 #757575; @@ -791,7 +753,6 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,126 +763,64 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #673AB7; background: #673AB7; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #673AB7; background: #673AB7; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #b00020; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #673AB7; background: #673AB7; + color: #ffffff; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #673AB7; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #b00020; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #673AB7; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #ececec; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #673AB7; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #673AB7; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #673AB7; - } - .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-fluid .p-chips { - display: flex; + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + gap: 0.5rem; } - .p-chips:not(.p-disabled):hover .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); } - .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - outline-color: transparent; - } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(0, 0, 0, 0.12); + background: rgba(103, 58, 183, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } - .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: rgba(0, 0, 0, 0.24); - color: rgba(0, 0, 0, 0.87); - } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -954,90 +853,11 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } - .p-dropdown { - 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 rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1048,18 +868,6 @@ box-shadow: none; border-color: #673AB7; } - .p-dropdown.p-variant-filled { - background: #f5f5f5; - } - .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: #ececec; - } - .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .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: 2rem; } @@ -1070,7 +878,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -1112,6 +920,13 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { + padding-right: 4rem; + margin-right: -4rem; + } + .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { + right: 3rem; + } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -1124,28 +939,14 @@ transition: none; 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: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(103, 58, 183, 0.24); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .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: 1rem; @@ -1158,6 +959,18 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { + background: #f5f5f5; + } + .p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #ececec; + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1224,36 +1037,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1264,25 +1055,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #673AB7; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #673AB7; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1375,40 +1168,11 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } - .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: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; @@ -1428,7 +1192,6 @@ } .p-listbox .p-listbox-list { padding: 0; - outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1438,16 +1201,15 @@ transition: none; 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: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1460,27 +1222,10 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(103, 58, 183, 0.24); - } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } - .p-listbox.p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; - } .p-listbox.p-invalid { border-color: #b00020; } @@ -1511,100 +1256,11 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .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 rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1615,14 +1271,8 @@ box-shadow: none; border-color: #673AB7; } - .p-multiselect.p-variant-filled { - background: #f5f5f5; - } - .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: #ececec; - } - .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: #dcdcdc; + .p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 2rem; } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1648,12 +1298,22 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect .p-multiselect-clear-icon { + color: rgba(0, 0, 0, 0.6); + right: 2.357rem; + } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { + padding: 1rem 1rem; + } + .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 2rem; + } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1670,6 +1330,9 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } + .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: 2rem; } @@ -1677,11 +1340,7 @@ right: 1rem; color: rgba(0, 0, 0, 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: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -1712,23 +1371,19 @@ transition: none; 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: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(103, 58, 183, 0.24); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1744,6 +1399,15 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { + background: #f5f5f5; + } + .p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #ececec; + } + .p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1768,47 +1432,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #757575; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1817,7 +1444,15 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,51 +1460,31 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #673AB7; background: #ffffff; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #673AB7; background: #ffffff; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #673AB7; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f5f5f5; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #ececec; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffffff; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ececec; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } .p-rating { @@ -2114,66 +1729,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); - border-radius: 4px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-button.p-highlight { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight:hover { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2623,54 +2216,6 @@ border-color: transparent; color: #d32f2f; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; - background: #212121; - border: 1px solid #212121; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #424242; - color: #ffffff; - border-color: #424242; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #616161; - color: #ffffff; - border-color: #616161; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { - background-color: transparent; - color: #212121; - border-color: transparent; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - border-color: transparent; - color: #212121; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - border-color: transparent; - color: #212121; - } .p-button.p-button-link { color: #673AB7; background: transparent; @@ -6448,64 +5993,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(103, 58, 183, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #673AB7; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #673AB7; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6858,37 +6345,6 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(33, 33, 33, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(33, 33, 33, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(33, 33, 33, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(33, 33, 33, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(33, 33, 33, 0.16); - } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -7469,9 +6925,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index cdb8396563..07ed790ef5 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -742,46 +742,8 @@ background-color: #dcdcdc; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 18px; - height: 18px; - } - .p-checkbox .p-checkbox-input { - border: 2px solid #757575; - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid #757575; - background: #ffffff; width: 18px; height: 18px; - color: rgba(0, 0, 0, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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 #757575; @@ -791,7 +753,6 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,61 +763,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #3F51B5; background: #3F51B5; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #3F51B5; background: #3F51B5; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #b00020; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #3F51B5; background: #3F51B5; + color: #ffffff; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #b00020; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #3F51B5; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #3F51B5; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #ececec; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } .p-chips { @@ -1224,36 +1166,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1264,25 +1184,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #3F51B5; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #3F51B5; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1768,47 +1690,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #757575; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1817,7 +1702,15 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,73 +1718,36 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #3F51B5; background: #ffffff; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #3F51B5; background: #ffffff; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #3F51B5; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + color: #3F51B5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f5f5f5; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #ececec; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffffff; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ececec; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1904,7 +1760,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2114,66 +1970,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); - border-radius: 4px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-button.p-highlight { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight:hover { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2623,54 +2457,6 @@ border-color: transparent; color: #d32f2f; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; - background: #212121; - border: 1px solid #212121; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #424242; - color: #ffffff; - border-color: #424242; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #616161; - color: #ffffff; - border-color: #616161; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { - background-color: transparent; - color: #212121; - border-color: transparent; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - border-color: transparent; - color: #212121; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - border-color: transparent; - color: #212121; - } .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -6448,64 +6234,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(63, 81, 181, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #3F51B5; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #3F51B5; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6858,37 +6586,6 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(33, 33, 33, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(33, 33, 33, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(33, 33, 33, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(33, 33, 33, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(33, 33, 33, 0.16); - } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -7469,9 +7166,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index bc593bc6b8..54cfaf7397 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,65 +733,26 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { width: 18px; height: 18px; } - .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); - background: #1e1e1e; - width: 18px; - height: 18px; - color: rgba(255, 255, 255, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.2s; - color: #121212; - 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 hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,126 +763,64 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #CE93D8; background: #CE93D8; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #CE93D8; background: #CE93D8; color: #121212; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #f44435; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #CE93D8; background: #CE93D8; + color: #121212; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #CE93D8; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f44435; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #CE93D8; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #CE93D8; + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #CE93D8; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; } - .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-fluid .p-chips { - display: flex; + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; } - .p-chips:not(.p-disabled):hover .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); } - .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } - .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: hsla(0, 0%, 100%, 0.12); + background: rgba(206, 147, 216, 0.16); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } - .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); - color: rgba(255, 255, 255, 0.87); - } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -954,90 +853,11 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } - .p-dropdown { - 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: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1048,18 +868,6 @@ box-shadow: none; border-color: #CE93D8; } - .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); - } - .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .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; } @@ -1070,7 +878,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -1097,7 +905,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1112,6 +920,13 @@ 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; } @@ -1124,27 +939,13 @@ transition: none; 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: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(206, 147, 216, 0.24); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { - position: relative; - margin-left: -0.5rem; - margin-right: 0.5rem; + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1158,17 +959,29 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1224,36 +1037,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1264,25 +1055,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #CE93D8; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: none; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: hsla(0deg, 0%, 100%, 0.3); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: rgba(206, 147, 216, 0.5); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #CE93D8; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(206, 147, 216, 0.5); + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1292,7 +1085,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1359,13 +1152,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1375,44 +1168,15 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } - .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: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1428,7 +1192,6 @@ } .p-listbox .p-listbox-list { padding: 0; - outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1438,16 +1201,15 @@ transition: none; 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: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1460,26 +1222,9 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(206, 147, 216, 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: hsla(0, 0%, 100%, 0.04); - } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); - } - .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: hsla(0, 0%, 100%, 0.04); - } - .p-listbox.p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-invalid { border-color: #f44435; @@ -1505,106 +1250,17 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 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: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1615,14 +1271,8 @@ box-shadow: none; border-color: #CE93D8; } - .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); - } - .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + .p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1634,7 +1284,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1648,12 +1298,22 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect .p-multiselect-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 2.357rem; + } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .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: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1663,13 +1323,16 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; border-top-right-radius: 4px; border-top-left-radius: 4px; } + .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; } @@ -1677,11 +1340,7 @@ 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); @@ -1712,22 +1371,18 @@ transition: none; 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: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(206, 147, 216, 0.24); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1744,6 +1399,15 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { + background: hsla(0deg, 0%, 100%, 0.06); + } + .p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1768,56 +1432,27 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 hsla(0, 0%, 100%, 0.7); - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,51 +1460,31 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #CE93D8; background: #121212; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #CE93D8; background: #121212; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #CE93D8; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + color: #CE93D8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #121212; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #121212; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #121212; + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #121212; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } .p-rating { @@ -1959,7 +1574,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1999,7 +1614,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2025,7 +1640,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2055,7 +1670,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2106,74 +1721,52 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .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 rgba(255, 255, 255, 0.12); - border-radius: 4px; + background-color: hsla(0deg, 0%, 100%, 0.1); } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #1c1c1c; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #373737; + .p-togglebutton.p-button.p-highlight { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .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 { + .p-togglebutton.p-button.p-highlight:hover { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2623,54 +2216,6 @@ border-color: transparent; color: #ef9a9a; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #121212; - background: #ffffff; - border: 1px solid #ffffff; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #d0d0d0; - color: #121212; - border-color: #d0d0d0; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #b8b8b8; - color: #121212; - border-color: #b8b8b8; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #ffffff; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.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-buttonset.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-buttonset.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: #CE93D8; background: transparent; @@ -3493,7 +3038,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3501,12 +3046,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3515,7 +3060,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3579,12 +3124,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3597,10 +3142,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3764,12 +3309,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3842,11 +3387,11 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4258,7 +3803,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4268,7 +3813,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4330,10 +3875,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4341,7 +3886,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4756,7 +4301,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4777,7 +4322,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4919,7 +4464,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4959,7 +4504,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5020,7 +4565,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5070,7 +4615,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5157,7 +4702,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5192,7 +4737,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5272,7 +4817,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5300,7 +4845,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5329,7 +4874,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5395,7 +4940,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5445,7 +4990,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5606,7 +5151,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5630,7 +5175,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5707,7 +5252,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5748,7 +5293,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5798,7 +5343,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5904,7 +5449,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5925,7 +5470,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6316,7 +5861,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6342,7 +5887,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6448,64 +5993,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(206, 147, 216, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #CE93D8; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #CE93D8; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6644,8 +6131,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6655,13 +6142,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6858,39 +6345,8 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(255, 255, 255, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(255, 255, 255, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(255, 255, 255, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(255, 255, 255, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(255, 255, 255, 0.16); - } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6940,7 +6396,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6967,8 +6423,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6978,13 +6434,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7045,8 +6501,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7056,13 +6512,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7101,15 +6557,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7169,8 +6625,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7180,13 +6636,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7256,8 +6712,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7267,13 +6723,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7319,20 +6775,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7352,8 +6808,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7469,9 +6925,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7498,8 +6951,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7509,13 +6962,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7663,10 +7116,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7908,8 +7361,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7919,13 +7372,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 64e2e43692..745ee08ace 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,65 +733,26 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 18px; - height: 18px; - } - .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); - background: #1e1e1e; width: 18px; height: 18px; - color: rgba(255, 255, 255, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.2s; - color: #121212; - 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 hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,61 +763,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #9FA8DA; background: #9FA8DA; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #9FA8DA; background: #9FA8DA; color: #121212; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #f44435; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #9FA8DA; background: #9FA8DA; + color: #121212; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9FA8DA; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f44435; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #9FA8DA; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9FA8DA; + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #9FA8DA; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } .p-chips { @@ -914,12 +856,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: hsla(0deg, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1034,7 +976,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1049,13 +991,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1097,7 +1039,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1139,7 +1081,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1161,14 +1103,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1224,36 +1166,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1264,25 +1184,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #9FA8DA; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: none; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: hsla(0deg, 0%, 100%, 0.3); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: rgba(159, 168, 218, 0.5); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #9FA8DA; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(159, 168, 218, 0.5); + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1292,7 +1214,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1359,13 +1281,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1405,14 +1327,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1465,15 +1387,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .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: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1505,7 +1427,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1601,7 +1523,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1616,13 +1538,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1634,7 +1556,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1663,7 +1585,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1727,7 +1649,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1768,56 +1690,27 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 hsla(0, 0%, 100%, 0.7); - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(255, 255, 255, 0.6); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,73 +1718,36 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #9FA8DA; background: #121212; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #9FA8DA; background: #121212; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #9FA8DA; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + color: #9FA8DA; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #121212; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #121212; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #121212; + background-color: hsla(0deg, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + background-color: hsla(0deg, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #121212; } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1904,7 +1760,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1959,7 +1815,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1999,7 +1855,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2025,7 +1881,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2055,7 +1911,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2106,74 +1962,52 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .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 rgba(255, 255, 255, 0.12); - border-radius: 4px; + background-color: hsla(0deg, 0%, 100%, 0.1); } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #1c1c1c; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #373737; + .p-togglebutton.p-button.p-highlight { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .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 { + .p-togglebutton.p-button.p-highlight:hover { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2623,54 +2457,6 @@ border-color: transparent; color: #ef9a9a; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #121212; - background: #ffffff; - border: 1px solid #ffffff; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #d0d0d0; - color: #121212; - border-color: #d0d0d0; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #b8b8b8; - color: #121212; - border-color: #b8b8b8; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #ffffff; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.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-buttonset.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-buttonset.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: #9FA8DA; background: transparent; @@ -3493,7 +3279,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3501,12 +3287,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3515,7 +3301,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3579,12 +3365,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3597,10 +3383,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3764,12 +3550,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3842,11 +3628,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4258,7 +4044,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4268,7 +4054,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4330,10 +4116,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4341,7 +4127,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4756,7 +4542,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4777,7 +4563,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4919,7 +4705,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4959,7 +4745,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5020,7 +4806,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5070,7 +4856,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5157,7 +4943,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5192,7 +4978,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5272,7 +5058,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5300,7 +5086,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5329,7 +5115,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5395,7 +5181,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5445,7 +5231,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5606,7 +5392,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5630,7 +5416,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5707,7 +5493,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5748,7 +5534,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5798,7 +5584,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5904,7 +5690,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5925,7 +5711,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6316,7 +6102,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6342,7 +6128,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6448,64 +6234,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(159, 168, 218, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #9FA8DA; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #9FA8DA; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6644,8 +6372,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6655,13 +6383,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6858,39 +6586,8 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(255, 255, 255, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(255, 255, 255, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(255, 255, 255, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(255, 255, 255, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(255, 255, 255, 0.16); - } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6940,7 +6637,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6967,8 +6664,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6978,13 +6675,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7045,8 +6742,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7056,13 +6753,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7101,15 +6798,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7169,8 +6866,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7180,13 +6877,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7256,8 +6953,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7267,13 +6964,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7319,20 +7016,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7352,8 +7049,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7469,9 +7166,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7498,8 +7192,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7509,13 +7203,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7663,10 +7357,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7908,8 +7602,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7919,13 +7613,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index b04197688e..47e3df24a1 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -742,46 +742,8 @@ background-color: #dcdcdc; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 18px; - height: 18px; - } - .p-checkbox .p-checkbox-input { - border: 2px solid #757575; - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid #757575; - background: #ffffff; width: 18px; height: 18px; - color: rgba(0, 0, 0, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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 #757575; @@ -791,7 +753,6 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,126 +763,64 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #673AB7; background: #673AB7; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #673AB7; background: #673AB7; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #b00020; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #673AB7; background: #673AB7; + color: #ffffff; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #673AB7; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #b00020; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #673AB7; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #ececec; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #673AB7; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #673AB7; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #673AB7; - } - .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-fluid .p-chips { - display: flex; + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + gap: 0.5rem; } - .p-chips:not(.p-disabled):hover .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); } - .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } - .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(0, 0, 0, 0.12); + background: rgba(103, 58, 183, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } - .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: rgba(0, 0, 0, 0.24); - color: rgba(0, 0, 0, 0.87); - } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -954,90 +853,11 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } - .p-dropdown { - 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 rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1048,18 +868,6 @@ box-shadow: none; border-color: #673AB7; } - .p-dropdown.p-variant-filled { - background: #f5f5f5; - } - .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: #ececec; - } - .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .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; } @@ -1070,7 +878,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } - .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -1112,6 +920,13 @@ right: 0.75rem; color: rgba(0, 0, 0, 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; } @@ -1124,28 +939,14 @@ transition: none; 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: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(103, 58, 183, 0.24); - } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .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; @@ -1158,6 +959,18 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { + background: #f5f5f5; + } + .p-input-filled .p-dropdown:not(.p-disabled):hover { + background-color: #ececec; + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1224,36 +1037,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1264,25 +1055,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #673AB7; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #673AB7; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1375,40 +1168,11 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } - .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: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; @@ -1428,7 +1192,6 @@ } .p-listbox .p-listbox-list { padding: 0; - outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1438,16 +1201,15 @@ transition: none; 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: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-listbox .p-listbox-list .p-listbox-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1460,27 +1222,10 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(103, 58, 183, 0.24); - } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { - color: rgba(0, 0, 0, 0.87); - background: rgba(0, 0, 0, 0.04); - } - .p-listbox.p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; - } .p-listbox.p-invalid { border-color: #b00020; } @@ -1511,100 +1256,11 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .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 rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; - outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1615,14 +1271,8 @@ box-shadow: none; border-color: #673AB7; } - .p-multiselect.p-variant-filled { - background: #f5f5f5; - } - .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: #ececec; - } - .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: #dcdcdc; + .p-multiselect.p-multiselect-clearable .p-multiselect-label { + padding-right: 1.75rem; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1648,12 +1298,22 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect .p-multiselect-clear-icon { + color: rgba(0, 0, 0, 0.6); + right: 2.357rem; + } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .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: rgba(0, 0, 0, 0.87); @@ -1670,6 +1330,9 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } + .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; } @@ -1677,11 +1340,7 @@ right: 0.75rem; color: rgba(0, 0, 0, 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(0, 0, 0, 0.6); @@ -1712,23 +1371,19 @@ transition: none; 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: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(103, 58, 183, 0.24); - } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1744,6 +1399,15 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { + background: #f5f5f5; + } + .p-input-filled .p-multiselect:not(.p-disabled):hover { + background-color: #ececec; + } + .p-input-filled .p-multiselect:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1768,47 +1432,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #757575; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1817,7 +1444,15 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,51 +1460,31 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #673AB7; background: #ffffff; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #673AB7; background: #ffffff; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #673AB7; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f5f5f5; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #ececec; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffffff; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ececec; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } .p-rating { @@ -2114,66 +1729,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); - border-radius: 4px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-button.p-highlight { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight:hover { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2623,54 +2216,6 @@ border-color: transparent; color: #d32f2f; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; - background: #212121; - border: 1px solid #212121; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #424242; - color: #ffffff; - border-color: #424242; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #616161; - color: #ffffff; - border-color: #616161; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { - background-color: transparent; - color: #212121; - border-color: transparent; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - border-color: transparent; - color: #212121; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - border-color: transparent; - color: #212121; - } .p-button.p-button-link { color: #673AB7; background: transparent; @@ -6448,64 +5993,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(103, 58, 183, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #673AB7; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #673AB7; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6858,37 +6345,6 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(33, 33, 33, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(33, 33, 33, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(33, 33, 33, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(33, 33, 33, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(33, 33, 33, 0.16); - } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -7469,9 +6925,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index c25dfb4bca..03b43807e8 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -742,46 +742,8 @@ background-color: #dcdcdc; } .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } - .p-checkbox { - width: 18px; - height: 18px; - } - .p-checkbox .p-checkbox-input { - border: 2px solid #757575; - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid #757575; - background: #ffffff; width: 18px; height: 18px; - color: rgba(0, 0, 0, 0.87); - border-radius: 4px; - transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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 #757575; @@ -791,7 +753,6 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -802,61 +763,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #3F51B5; background: #3F51B5; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #3F51B5; background: #3F51B5; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #b00020; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #3F51B5; background: #3F51B5; + color: #ffffff; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #b00020; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #3F51B5; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #ececec; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f5f5f5; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #3F51B5; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #ececec; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } .p-chips { @@ -1224,36 +1166,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2.75rem; height: 1rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 0.5rem; - } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1264,25 +1184,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #3F51B5; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #3F51B5; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1768,47 +1690,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #757575; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1817,7 +1702,15 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: rgba(0, 0, 0, 0.87); + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1825,73 +1718,36 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #3F51B5; background: #ffffff; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #3F51B5; background: #ffffff; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #3F51B5; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + color: #3F51B5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f5f5f5; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #ececec; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffffff; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #ffffff; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ececec; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1904,7 +1760,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2114,66 +1970,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); - border-radius: 4px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - 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: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { + .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: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-button.p-highlight { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight:hover { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2623,54 +2457,6 @@ border-color: transparent; color: #d32f2f; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; - background: #212121; - border: 1px solid #212121; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #424242; - color: #ffffff; - border-color: #424242; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #616161; - color: #ffffff; - border-color: #616161; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - color: #212121; - border: 0 none; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { - background-color: transparent; - color: #212121; - border-color: transparent; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.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(33, 33, 33, 0.04); - border-color: transparent; - color: #212121; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.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(33, 33, 33, 0.16); - border-color: transparent; - color: #212121; - } .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -6448,64 +6234,6 @@ outline-offset: 0; box-shadow: none; } - .p-metergroup .p-metergroup-meter-container { - background: rgba(63, 81, 181, 0.32); - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #3F51B5; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 4px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #3F51B5; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 4px; @@ -6858,37 +6586,6 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } - .p-button.p-button-contrast:enabled:focus, - .p-buttonset.p-button-contrast > .p-button:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button:enabled:focus { - background: rgba(33, 33, 33, 0.76); - } - .p-button.p-button-contrast:enabled:active, - .p-buttonset.p-button-contrast > .p-button:enabled:active, - .p-splitbutton.p-button-contrast > .p-button:enabled:active { - background: rgba(33, 33, 33, 0.68); - } - .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { - background: rgba(33, 33, 33, 0.12); - } - .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { - background: rgba(33, 33, 33, 0.16); - } - .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, - .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, - .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { - background-color: rgba(33, 33, 33, 0.16); - } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -7469,9 +7166,6 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 1rem; - } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index 1182e19832..d873599dfc 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -743,48 +743,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #d8dee9; - border-radius: 4px; - } - .p-checkbox .p-checkbox-box { - border: 2px solid #d8dee9; - background: #ffffff; - width: 20px; - height: 20px; - color: #4c566a; - border-radius: 4px; - 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 #d8dee9; background: #ffffff; @@ -793,7 +755,6 @@ color: #4c566a; border-radius: 4px; 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; @@ -804,61 +765,42 @@ width: 14px; height: 14px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #5e81ac; background: #5e81ac; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #81a1c1; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #48678c; background: #81a1c1; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #81a1c1; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #48678c; + background: #81a1c1; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #bf616a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #eceff4; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #5e81ac; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #eceff4; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #81a1c1; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #eceff4; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #5e81ac; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #eceff4; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #81a1c1; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #eceff4; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #5e81ac; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #eceff4; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #81a1c1; } .p-chips { @@ -1226,36 +1168,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #d8dee9; 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: #5e81ac; @@ -1266,25 +1186,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #5e81ac; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #eceff4; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #81a1c1; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #eceff4; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #5e81ac; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #81a1c1; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #bf616a; } .p-inputtext { @@ -1770,47 +1692,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #7fa366; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #d8dee9; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #d8dee9; background: #ffffff; @@ -1819,7 +1704,15 @@ color: #4c566a; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #81a1c1; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + border-color: #81a1c1; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1827,73 +1720,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #5e81ac; background: #5e81ac; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #81a1c1; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #5e81ac; background: #81a1c1; - } - .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 #c0d0e0; - border-color: #81a1c1; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #bf616a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #eceff4; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #5e81ac; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #eceff4; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #81a1c1; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #eceff4; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #5e81ac; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #eceff4; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #81a1c1; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #4c566a; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1906,7 +1762,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #bf616a; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -2116,66 +1972,44 @@ .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: 2px solid #d8dee9; - border-radius: 4px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 2px solid #d8dee9; color: #4c566a; 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: #81a1c1; } - .p-togglebutton.p-highlight .p-button { - background: #5e81ac; - border-color: #5e81ac; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #eceff4; border-color: #81a1c1; color: #4c566a; } - .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 { + .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: #81a1c1; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { - background: #81a1c1; + .p-togglebutton.p-button.p-highlight { + background: #5e81ac; border-color: #5e81ac; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } - .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 #c0d0e0; - border-color: #81a1c1; + .p-togglebutton.p-button.p-highlight:hover { + background: #81a1c1; + border-color: #5e81ac; + color: #ffffff; } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #bf616a; } .p-button { @@ -6402,64 +6236,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e9f0; - border-radius: 4px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #5e81ac; - } - .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: #5e81ac; - 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: 4px; - border-bottom-left-radius: 4px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - .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: 4px; - border-top-right-radius: 4px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - .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; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 5493b34440..5d174c729e 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 14px; height: 14px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #a5acb3; - border-radius: 1px; - } .p-checkbox .p-checkbox-box { border: 2px solid #a5acb3; background: #ffffff; @@ -752,7 +733,6 @@ color: #343a3f; border-radius: 1px; 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; @@ -763,80 +743,42 @@ width: 12px; height: 12px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #a5acb3; - background: #ffffff; - width: 14px; - height: 14px; - color: #343a3f; - border-radius: 1px; - 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: 12px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 12px; - height: 12px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #1174c0; background: #1174c0; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #1174c0; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #0e5d9a; background: #0e5d9a; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #1174c0; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #0e5d9a; + background: #0e5d9a; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #d8222f; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f2f4f8; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #1174c0; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f2f4f8; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0e5d9a; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f4f8; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #1174c0; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f2f4f8; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0e5d9a; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f2f4f8; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #1174c0; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f2f4f8; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0e5d9a; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 2rem; height: 1.155rem; } - .p-inputswitch .p-inputswitch-input { - border-radius: 30px; - } .p-inputswitch .p-inputswitch-slider { background: #a5acb3; 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; @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #1174c0; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(0.825rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #929ba3; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #0f68ad; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #929ba3; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #1174c0; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #0f68ad; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #d8222f; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #207f3b; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 14px; height: 14px; } - .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 #a5acb3; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #a5acb3; background: #ffffff; @@ -1797,7 +1682,15 @@ color: #343a3f; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #1174c0; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 8px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #1174c0; background: #1174c0; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #1174c0; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #0e5d9a; background: #0e5d9a; - } - .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 #90c9f5; - border-color: #1174c0; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #d8222f; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f2f4f8; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #1174c0; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f4f8; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #0e5d9a; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f2f4f8; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #1174c0; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f2f4f8; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e5d9a; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #343a3f; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -2094,66 +1950,44 @@ .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 #a5acb3; - border-radius: 1px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #a5acb3; color: #343a3f; 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: #697077; } - .p-togglebutton.p-highlight .p-button { - background: #1174c0; - border-color: #1174c0; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #dde1e6; border-color: #a5acb3; color: #343a3f; } - .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 { + .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: #697077; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #1174c0; + border-color: #1174c0; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #0f68ad; border-color: #0f68ad; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #90c9f5; - border-color: #1174c0; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #d8222f; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } - .p-metergroup .p-metergroup-meter-container { - background: #dee2e6; - border-radius: 1px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #1174c0; - } - .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: #1174c0; - 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: 1px; - border-bottom-left-radius: 1px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 1px; - border-bottom-right-radius: 1px; - } - .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: 1px; - border-top-right-radius: 1px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 1px; - border-bottom-right-radius: 1px; - } - .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; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 8e16c12b2f..584a16b509 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #a6a6a6; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -752,7 +733,6 @@ color: #333333; border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #a6a6a6; - background: #ffffff; - width: 20px; - height: 20px; - color: #333333; - border-radius: 3px; - 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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #007ad9; background: #007ad9; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #212121; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #212121; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #005b9f; + background: #005b9f; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #007ad9; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005b9f; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #007ad9; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005b9f; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #007ad9; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f4f4f4; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #cccccc; 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; @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #007ad9; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #cccccc; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #116fbf; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7b7b7; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #007ad9; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #cccccc; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #116fbf; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #a6a6a6; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1797,7 +1682,15 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #212121; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #007ad9; background: #007ad9; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #212121; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #005b9f; background: #005b9f; - } - .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 #8dcdff; - border-color: #007ad9; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #007ad9; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #005b9f; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #007ad9; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; color: #333333; 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: #666666; } - .p-togglebutton.p-highlight .p-button { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #c8c8c8; border-color: #c8c8c8; color: #333333; } - .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 { + .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: #212121; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #007ad9; + border-color: #007ad9; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #116fbf; border-color: #116fbf; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #8dcdff; - border-color: #007ad9; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #a80000; } .p-button { @@ -6331,64 +6165,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-metergroup .p-metergroup-meter-container { - background: #eaeaea; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #007ad9; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #007ad9; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index dfae30d6ea..d63f2e988e 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #a6a6a6; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -752,7 +733,6 @@ color: #333333; border-radius: 3px; 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; @@ -763,85 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #a6a6a6; - background: #ffffff; - width: 20px; - height: 20px; - color: #333333; - border-radius: 3px; - 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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #007ad9; background: #007ad9; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #212121; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #212121; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #005b9f; + background: #005b9f; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #007ad9; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005b9f; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #007ad9; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f4f4f4; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #007ad9; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005b9f; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #cccccc; 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; @@ -1247,25 +1167,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #007ad9; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #cccccc; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #116fbf; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7b7b7; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #007ad9; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #cccccc; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #116fbf; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #a6a6a6; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1800,7 +1685,15 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #212121; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #007ad9; background: #007ad9; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #212121; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #005b9f; background: #005b9f; - } - .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 #8dcdff; - border-color: #007ad9; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #007ad9; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #005b9f; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #007ad9; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; color: #333333; 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: #666666; } - .p-togglebutton.p-highlight .p-button { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #c8c8c8; border-color: #c8c8c8; color: #333333; } - .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 { + .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: #212121; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #007ad9; + border-color: #007ad9; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #116fbf; border-color: #116fbf; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #8dcdff; - border-color: #007ad9; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #a80000; } .p-button { @@ -6340,64 +6174,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-metergroup .p-metergroup-meter-container { - background: #eaeaea; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #007ad9; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #007ad9; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index cc2529e223..54fb418ce1 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #a6a6a6; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -752,7 +733,6 @@ color: #333333; border-radius: 3px; 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; @@ -763,85 +743,47 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #a6a6a6; - background: #ffffff; - width: 20px; - height: 20px; - color: #333333; - border-radius: 3px; - 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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #007ad9; background: #007ad9; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #212121; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #212121; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #005b9f; + background: #005b9f; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #007ad9; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005b9f; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #007ad9; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f4f4f4; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #007ad9; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #005b9f; - } .p-chips { display: inline-flex; } @@ -1207,36 +1149,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #cccccc; 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; @@ -1247,25 +1167,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #007ad9; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #cccccc; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #116fbf; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b7b7b7; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #007ad9; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #cccccc; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #116fbf; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1751,47 +1673,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #a6a6a6; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1800,7 +1685,15 @@ color: #333333; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #212121; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1808,76 +1701,39 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #007ad9; background: #007ad9; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #212121; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #005b9f; background: #005b9f; - } - .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 #8dcdff; - border-color: #007ad9; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #007ad9; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #005b9f; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #007ad9; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1890,7 +1746,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2103,66 +1959,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; color: #333333; 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: #666666; } - .p-togglebutton.p-highlight .p-button { - background: #007ad9; - border-color: #007ad9; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #c8c8c8; border-color: #c8c8c8; color: #333333; } - .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 { + .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: #212121; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #007ad9; + border-color: #007ad9; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #116fbf; border-color: #116fbf; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #8dcdff; - border-color: #007ad9; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #a80000; } .p-button { @@ -6340,64 +6174,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } - .p-metergroup .p-metergroup-meter-container { - background: #eaeaea; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #007ad9; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #007ad9; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 4f2bb1289a..4fdfdbba5f 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 1px solid #dadada; - border-radius: 2px; - } .p-checkbox .p-checkbox-box { border: 1px solid #dadada; background: #ffffff; @@ -752,7 +733,6 @@ color: #666666; border-radius: 2px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 1px solid #dadada; - background: #ffffff; - width: 20px; - height: 20px; - color: #666666; - border-radius: 2px; - 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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #7b95a3; background: #7b95a3; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #a6a6a6; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #617c8a; background: #617c8a; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #a6a6a6; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #617c8a; + background: #617c8a; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e7a3a3; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #7b95a3; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #617c8a; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #7b95a3; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f4f4f4; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #617c8a; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f4f4f4; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #7b95a3; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f4f4f4; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #617c8a; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #ffffff; 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: #7b95a3; @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #afd3c8; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #385048; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + } + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #d8dae2; } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: #afd3c8; } - .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 #e4e9ec; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #385048; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #afd3c8; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #e7a3a3; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #a3e2c6; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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: 1px solid #dadada; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 1px solid #dadada; background: #ffffff; @@ -1797,7 +1682,15 @@ color: #666666; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #a6a6a6; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7b95a3; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #7b95a3; background: #7b95a3; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #a6a6a6; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #617c8a; background: #617c8a; - } - .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 #e4e9ec; - border-color: #7b95a3; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e7a3a3; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #7b95a3; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #617c8a; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #7b95a3; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f4f4f4; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #617c8a; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #666666; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f3b9b9; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #eaeaea; - border-radius: 2px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #eaeaea; border: 1px solid #eaeaea; color: #333333; 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: #666666; } - .p-togglebutton.p-highlight .p-button { - background: #afd3c8; - border-color: #afd3c8; - color: #385048; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #385048; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #c8c8c8; border-color: #c8c8c8; color: #333333; } - .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 { + .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: #666666; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #afd3c8; + border-color: #afd3c8; + color: #385048; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #385048; + } + .p-togglebutton.p-button.p-highlight:hover { background: #8dc8b5; border-color: #8dc8b5; color: #385048; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #385048; } - .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 #e4e9ec; - border-color: #7b95a3; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #e7a3a3; } .p-button { @@ -6331,64 +6165,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } - .p-metergroup .p-metergroup-meter-container { - background: #efefef; - border-radius: 2px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #7b95a3; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { - line-height: 24px; - } - .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #7b95a3; - 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: 2px; - border-bottom-left-radius: 2px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - .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: 2px; - border-top-right-radius: 2px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { - margin-left: 1rem; - } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 3d78cdccef..21ecd1a446 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #ced4da; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -752,7 +733,6 @@ color: #495057; border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #ced4da; - background: #ffffff; - width: 20px; - height: 20px; - color: #495057; - border-radius: 3px; - 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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #2196f3; background: #2196f3; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #2196f3; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #0b7ad1; background: #0b7ad1; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #2196f3; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196f3; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #0b7ad1; + background: #0b7ad1; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f8f9fa; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #2196f3; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f8f9fa; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0b7ad1; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #2196f3; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f8f9fa; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #0b7ad1; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f8f9fa; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #2196f3; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f8f9fa; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0b7ad1; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #ced4da; 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; @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #2196f3; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #0d89ec; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b6bfc8; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #2196f3; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #0d89ec; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #ced4da; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #ced4da; background: #ffffff; @@ -1797,7 +1682,15 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #2196f3; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196f3; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #2196f3; background: #2196f3; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #2196f3; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #0b7ad1; background: #0b7ad1; - } - .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 #a6d5fa; - border-color: #2196f3; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44336; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f8f9fa; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #2196f3; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #0b7ad1; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f8f9fa; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #2196f3; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f8f9fa; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0b7ad1; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -2094,66 +1950,44 @@ .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 #ced4da; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; color: #495057; 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: #6c757d; } - .p-togglebutton.p-highlight .p-button { - background: #2196f3; - border-color: #2196f3; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: #ced4da; color: #495057; } - .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 { + .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: #6c757d; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #2196f3; + border-color: #2196f3; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #0d89ec; border-color: #0d89ec; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #a6d5fa; - border-color: #2196f3; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } - .p-metergroup .p-metergroup-meter-container { - background: #dee2e6; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #2196f3; - } - .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: #2196f3; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 694e296323..848416417a 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #ced4da; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -752,7 +733,6 @@ color: #495057; border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #ced4da; - background: #ffffff; - width: 20px; - height: 20px; - color: #495057; - border-radius: 3px; - 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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #4caf50; background: #4caf50; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #4caf50; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #3d8c40; background: #3d8c40; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #4caf50; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4caf50; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #3d8c40; + background: #3d8c40; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f8f9fa; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #4caf50; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f8f9fa; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3d8c40; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #4caf50; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f8f9fa; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3d8c40; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f8f9fa; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #4caf50; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f8f9fa; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3d8c40; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #ced4da; 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; @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #4caf50; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #449e48; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b6bfc8; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #4caf50; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #449e48; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #ced4da; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #ced4da; background: #ffffff; @@ -1797,7 +1682,15 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #4caf50; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4caf50; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #4caf50; background: #4caf50; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #4caf50; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #3d8c40; background: #3d8c40; - } - .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 #b7e0b8; - border-color: #4caf50; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44336; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f8f9fa; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #4caf50; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #3d8c40; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f8f9fa; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #4caf50; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f8f9fa; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3d8c40; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -2094,66 +1950,44 @@ .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 #ced4da; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; color: #495057; 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: #6c757d; } - .p-togglebutton.p-highlight .p-button { - background: #4caf50; - border-color: #4caf50; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: #ced4da; color: #495057; } - .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 { + .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: #6c757d; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #4caf50; + border-color: #4caf50; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #449e48; border-color: #449e48; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .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 #b7e0b8; - border-color: #4caf50; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } - .p-metergroup .p-metergroup-meter-container { - background: #dee2e6; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #4caf50; - } - .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: #4caf50; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index e9529af157..cb2519d539 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #ced4da; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -752,7 +733,6 @@ color: #495057; border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #ced4da; - background: #ffffff; - width: 20px; - height: 20px; - color: #495057; - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #ffc107; background: #ffc107; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #ffc107; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #d29d00; background: #d29d00; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #ffc107; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #ffc107; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #d29d00; + background: #d29d00; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f8f9fa; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #ffc107; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f8f9fa; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #d29d00; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #ffc107; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f8f9fa; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #d29d00; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f8f9fa; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #ffc107; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f8f9fa; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #d29d00; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #ced4da; 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; @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #ffc107; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #ecb100; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b6bfc8; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #ffc107; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #ecb100; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #ced4da; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #ced4da; background: #ffffff; @@ -1797,7 +1682,15 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #ffc107; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #ffc107; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #ffc107; background: #ffc107; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #ffc107; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #d29d00; background: #d29d00; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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 #ffe69c; - border-color: #ffc107; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44336; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f8f9fa; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffc107; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #d29d00; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f8f9fa; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ffc107; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f8f9fa; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #d29d00; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -2094,66 +1950,44 @@ .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 #ced4da; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; color: #495057; 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: #6c757d; } - .p-togglebutton.p-highlight .p-button { - background: #ffc107; - border-color: #ffc107; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: #ced4da; color: #495057; } - .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 { + .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: #6c757d; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #ffc107; + border-color: #ffc107; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #ecb100; border-color: #ecb100; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .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 #ffe69c; - border-color: #ffc107; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } - .p-metergroup .p-metergroup-meter-container { - background: #dee2e6; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #ffc107; - } - .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: #ffc107; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 783a987213..d23b0688e9 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -10,7 +10,7 @@ --text-color: rgba(255, 255, 255, 0.87); --text-color-secondary: rgba(255, 255, 255, 0.6); --primary-color: #b19df7; - --primary-color-text: hsl(234, 15%, 13%); + --primary-color-text: hsl(234deg, 15%, 13%); --surface-0: #1d1e27; --surface-50: #34343d; --surface-100: #4a4b52; @@ -740,29 +740,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3e4053; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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 #3e4053; - border-radius: 6px; - } .p-checkbox .p-checkbox-box { border: 2px solid #3e4053; background: #1d1e27; @@ -771,91 +752,52 @@ 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: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); 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 #3e4053; - background: #1d1e27; - 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: hsl(234, 15%, 13%); - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #b19df7; background: #b19df7; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #b19df7; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #b19df7; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #9378f4; + background: #9378f4; + color: hsl(234deg, 15%, 13%); + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ff9a9a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #3e4053; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #b19df7; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #3e4053; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9378f4; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3e4053; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #b19df7; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #3e4053; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #9378f4; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #3e4053; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #b19df7; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #3e4053; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9378f4; } .p-chips { @@ -1223,36 +1165,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #3e4053; 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); @@ -1263,25 +1183,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #b19df7; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #a28af5; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #b19df7; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #a28af5; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ff9a9a; } .p-inputtext { @@ -1767,47 +1689,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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 #3e4053; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #3e4053; background: #1d1e27; @@ -1816,81 +1701,52 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #b19df7; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #b19df7; background: #b19df7; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #b19df7; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #9378f4; background: #9378f4; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: hsl(234, 15%, 13%); - } - .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 1px #e0d8fc; - border-color: #b19df7; + color: hsl(234deg, 15%, 13%); } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ff9a9a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #3e4053; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #b19df7; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3e4053; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #9378f4; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #3e4053; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #b19df7; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #3e4053; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9378f4; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1903,7 +1759,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -1939,20 +1795,20 @@ .p-selectbutton .p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, .p-selectbutton .p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton.p-invalid > .p-button { border-color: #ff9a9a; @@ -2113,70 +1969,48 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3e4053; } - .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 #3e4053; - border-radius: 6px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #282936; border: 1px solid #3e4053; 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 { + .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-highlight .p-button { - background: #b19df7; - border-color: #b19df7; - color: hsl(234, 15%, 13%); - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: hsl(234, 15%, 13%); - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: #3e4053; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #b19df7; + border-color: #b19df7; + color: hsl(234deg, 15%, 13%); + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: hsl(234deg, 15%, 13%); + } + .p-togglebutton.p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } - .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: hsl(234, 15%, 13%); - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - border-color: #b19df7; + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: hsl(234deg, 15%, 13%); } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ff9a9a; } .p-button { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); background: #b19df7; border: 1px solid #b19df7; padding: 0.75rem 1.25rem; @@ -2186,12 +2020,12 @@ } .p-button:not(:disabled):hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); border-color: #a28af5; } .p-button:not(:disabled):active { background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); border-color: #9378f4; } .p-button.p-button-outlined { @@ -2273,7 +2107,7 @@ height: 1rem; line-height: 1rem; color: #b19df7; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-button.p-button-raised { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -2622,54 +2456,6 @@ border-color: transparent; color: #eb9a9c; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #1d1e27; - background: #ffffff; - border: 1px solid #ffffff; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #d2d2d4; - color: #1d1e27; - border-color: #d2d2d4; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #bbbcbe; - color: #1d1e27; - border-color: #bbbcbe; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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-buttonset.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: #b19df7; background: transparent; @@ -4092,7 +3878,7 @@ border-radius: 50%; width: 1rem; height: 1rem; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-timeline .p-timeline-event-connector { background-color: #3e4053; @@ -4529,7 +4315,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); width: 2rem; height: 2rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4540,7 +4326,7 @@ } .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-overlaypanel:after { border: solid transparent; @@ -6354,7 +6140,7 @@ } .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; @@ -6398,64 +6184,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } - .p-metergroup .p-metergroup-meter-container { - background: #3e4053; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #b19df7; - } - .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: #b19df7; - 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; @@ -6468,7 +6196,7 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); line-height: 1.5rem; } .p-terminal { @@ -6484,7 +6212,7 @@ } .p-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -6525,7 +6253,7 @@ } .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 0d51b56b3c..957fef8f0b 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -740,29 +740,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .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 #d3dbe3; - border-radius: 6px; - } .p-checkbox .p-checkbox-box { border: 2px solid #d3dbe3; background: #ffffff; @@ -771,7 +752,6 @@ color: #043d75; 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; @@ -782,80 +762,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #d3dbe3; - background: #ffffff; - width: 22px; - height: 22px; - color: #043d75; - 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-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #7254f3; background: #7254f3; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #7254f3; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #5935f1; background: #5935f1; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #7254f3; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #5935f1; + background: #5935f1; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ff6767; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f6f9fc; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #7254f3; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f6f9fc; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #5935f1; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f6f9fc; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #7254f3; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f6f9fc; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #5935f1; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f6f9fc; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #7254f3; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f6f9fc; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #5935f1; } .p-chips { @@ -1223,36 +1165,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #d3dbe3; 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; @@ -1263,25 +1183,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #7254f3; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b8c5d2; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #6545f2; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b8c5d2; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #7254f3; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #6545f2; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ff6767; } .p-inputtext { @@ -1767,47 +1689,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.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 #d3dbe3; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #d3dbe3; background: #ffffff; @@ -1816,7 +1701,15 @@ color: #043d75; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #7254f3; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1824,73 +1717,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #7254f3; background: #7254f3; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #7254f3; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #5935f1; background: #5935f1; - } - .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 1px #c7bbfa; - border-color: #7254f3; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ff6767; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f6f9fc; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #7254f3; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f6f9fc; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #5935f1; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f6f9fc; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #7254f3; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f6f9fc; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #5935f1; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #043d75; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1903,7 +1759,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -2113,66 +1969,44 @@ .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 #d3dbe3; - border-radius: 6px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d3dbe3; color: #043d75; 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: #708da9; } - .p-togglebutton.p-highlight .p-button { - background: #7254f3; - border-color: #7254f3; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #f6f9fc; border-color: #d3dbe3; color: #043d75; } - .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 { + .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: #708da9; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #7254f3; + border-color: #7254f3; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #6545f2; border-color: #6545f2; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - border-color: #7254f3; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ff6767; } .p-button { @@ -2622,54 +2456,6 @@ border-color: transparent; color: #ea5455; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; - background: #212529; - border: 1px solid #212529; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #343a40; - color: #ffffff; - border-color: #343a40; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #043d75; - color: #ffffff; - border-color: #043d75; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #212529; - border: 1px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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(33, 37, 41, 0.04); - color: #212529; - border: 1px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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(33, 37, 41, 0.16); - color: #212529; - border: 1px solid; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { - background-color: transparent; - color: #212529; - border-color: transparent; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.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(33, 37, 41, 0.04); - border-color: transparent; - color: #212529; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.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(33, 37, 41, 0.16); - border-color: transparent; - color: #212529; - } .p-button.p-button-link { color: #5935f1; background: transparent; @@ -6398,64 +6184,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } - .p-metergroup .p-metergroup-meter-container { - background: #dfe7ef; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #7254f3; - } - .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: #7254f3; - 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; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 33e0dcec5a..5afb470ab2 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -749,48 +749,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 16px; height: 16px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #d4d4d8; - border-radius: 0.375rem; - } - .p-checkbox .p-checkbox-box { - border: 2px solid #d4d4d8; - background: #ffffff; - width: 16px; - height: 16px; - color: #3f3f46; - border-radius: 0.375rem; - transition: none; - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.2s; - color: #ffffff; - font-size: 10px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 10px; - height: 10px; - } .p-checkbox .p-checkbox-box { border: 2px solid #d4d4d8; background: #ffffff; @@ -799,7 +761,6 @@ color: #3f3f46; border-radius: 0.375rem; transition: none; - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -810,61 +771,42 @@ width: 10px; height: 10px; } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #4f46e5; background: #4f46e5; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #d4d4d8; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #4f46e5; background: #4f46e5; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #d4d4d8; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } - .p-checkbox.p-invalid > .p-checkbox-box { - border-color: #f0a9a7; - } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #fafafa; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #4f46e5; background: #4f46e5; + color: #ffffff; } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #fafafa; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #4f46e5; + .p-checkbox.p-invalid > .p-checkbox-box { + border-color: #f0a9a7; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #fafafa; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #4f46e5; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #fafafa; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #4f46e5; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #fafafa; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #4f46e5; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #fafafa; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4f46e5; } .p-chips { @@ -1232,36 +1174,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #d4d4d8; transition: none; border-radius: 30px; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1272,25 +1192,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #4f46e5; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #bebec4; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #4338ca; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #bebec4; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #4f46e5; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #4338ca; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f0a9a7; } .p-inputtext { @@ -1776,47 +1698,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #22c55e; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 16px; height: 16px; } - .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 #d4d4d8; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #d4d4d8; background: #ffffff; @@ -1825,7 +1710,15 @@ color: #3f3f46; border-radius: 50%; transition: none; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #d4d4d8; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + border-color: #4f46e5; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 6px; @@ -1833,73 +1726,36 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #4f46e5; background: #4f46e5; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #d4d4d8; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #4f46e5; background: #4f46e5; - } - .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 1px #6366f1; - border-color: #4f46e5; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f0a9a7; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #fafafa; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #4f46e5; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #fafafa; - } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #4f46e5; + .p-radiobutton:focus { + outline: 0 none; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #fafafa; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { - background: #4f46e5; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #fafafa; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #4f46e5; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #4f46e5; } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #3f3f46; transition: none; @@ -1912,7 +1768,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ef4444; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -2122,66 +1978,44 @@ .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 #d4d4d8; - border-radius: 0.375rem; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d4d4d8; color: #3f3f46; transition: none; - 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: #71717a; } - .p-togglebutton.p-highlight .p-button { - background: #4f46e5; - border-color: #4f46e5; - color: #ffffff; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #ffffff; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f5; border-color: #d4d4d8; color: #3f3f46; } - .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 { + .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: #71717a; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #4f46e5; + border-color: #4f46e5; + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #ffffff; + } + .p-togglebutton.p-button.p-highlight:hover { background: #4338ca; border-color: #4338ca; color: #ffffff; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366f1; - border-color: #4f46e5; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f0a9a7; } .p-button { @@ -6408,64 +6242,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } - .p-metergroup .p-metergroup-meter-container { - background: #e5e7eb; - border-radius: 0.375rem; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #4f46e5; - } - .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: #4f46e5; - 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: 0.375rem; - border-bottom-left-radius: 0.375rem; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - } - .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: 0.375rem; - border-top-right-radius: 0.375rem; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - } - .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; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index b212ac498f..d980247cc2 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #304562; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -752,7 +733,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #304562; - background: #17212f; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #64b5f6; background: #64b5f6; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #64b5f6; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #2396f2; background: #2396f2; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #64b5f6; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #2396f2; + background: #2396f2; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #304562; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #64b5f6; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #304562; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #2396f2; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #64b5f6; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #304562; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #2396f2; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #304562; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #64b5f6; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #304562; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #304562; 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); @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #64b5f6; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #43a5f4; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #64b5f6; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #43a5f4; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #304562; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #304562; background: #17212f; @@ -1797,7 +1682,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #64b5f6; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #64b5f6; background: #64b5f6; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #64b5f6; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #2396f2; background: #2396f2; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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 1px #93cbf9; - border-color: #64b5f6; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #304562; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #64b5f6; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #2396f2; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #304562; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #64b5f6; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #304562; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } - .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 #304562; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; 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 { + .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-highlight .p-button { - background: #64b5f6; - border-color: #64b5f6; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: #304562; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #64b5f6; + border-color: #64b5f6; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #43a5f4; border-color: #43a5f4; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64b5f6; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } - .p-metergroup .p-metergroup-meter-container { - background: #304562; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #64b5f6; - } - .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: #64b5f6; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 0d4fb2cf72..99cb80121d 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #304562; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -752,7 +733,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #304562; - background: #17212f; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #81c784; background: #81c784; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #81c784; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #54b358; background: #54b358; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #81c784; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #54b358; + background: #54b358; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #304562; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #81c784; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #304562; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #54b358; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #81c784; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #304562; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #54b358; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #304562; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #81c784; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #304562; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #304562; 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); @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #81c784; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #6abd6e; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #81c784; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #6abd6e; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #304562; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #304562; background: #17212f; @@ -1797,7 +1682,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #81c784; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #81c784; background: #81c784; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #81c784; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #54b358; background: #54b358; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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 1px #a7d8a9; - border-color: #81c784; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #304562; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #81c784; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #54b358; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #304562; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #81c784; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #304562; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } - .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 #304562; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; 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 { + .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-highlight .p-button { - background: #81c784; - border-color: #81c784; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: #304562; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #81c784; + border-color: #81c784; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #6abd6e; border-color: #6abd6e; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81c784; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } - .p-metergroup .p-metergroup-meter-container { - background: #304562; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #81c784; - } - .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: #81c784; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 24cca99ed5..6b6b01f861 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -721,29 +721,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #304562; - border-radius: 3px; - } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -752,7 +733,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; 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; @@ -763,80 +743,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #304562; - background: #17212f; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 3px; - 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: #212529; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #ffd54f; background: #ffd54f; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #ffd54f; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #ffc50c; background: #ffc50c; color: #212529; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #ffd54f; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #ffc50c; + background: #ffc50c; + color: #212529; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #304562; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #ffd54f; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #304562; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ffc50c; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #ffd54f; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #304562; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #ffc50c; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #304562; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #ffd54f; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #304562; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } .p-chips { @@ -1204,36 +1146,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: #304562; 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); @@ -1244,25 +1164,27 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #ffd54f; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #ffcd2e; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #ffd54f; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #ffcd2e; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1748,47 +1670,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #304562; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #304562; background: #17212f; @@ -1797,7 +1682,15 @@ 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; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #ffd54f; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1805,73 +1698,36 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #ffd54f; background: #ffd54f; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #ffd54f; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #ffc50c; background: #ffc50c; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #212529; - } - .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 1px #ffe284; - border-color: #ffd54f; + color: #212529; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #304562; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #ffd54f; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #ffc50c; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #304562; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #ffd54f; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #304562; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1884,7 +1740,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2094,66 +1950,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } - .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 #304562; - border-radius: 3px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; 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 { + .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-highlight .p-button { - background: #ffd54f; - border-color: #ffd54f; - color: #212529; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #212529; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: #304562; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #ffd54f; + border-color: #ffd54f; + color: #212529; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #212529; + } + .p-togglebutton.p-button.p-highlight:hover { background: #ffcd2e; border-color: #ffcd2e; color: #212529; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #ffd54f; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6380,64 +6214,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } - .p-metergroup .p-metergroup-meter-container { - background: #304562; - border-radius: 3px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #ffd54f; - } - .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: #ffd54f; - 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: 3px; - border-bottom-left-radius: 3px; - } - .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - .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: 3px; - border-top-right-radius: 3px; - } - .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - .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; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 0ff4ec5b3b..12e9cf1f13 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -747,29 +747,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #263238; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #263238; - border-radius: 6px; - } .p-checkbox .p-checkbox-box { border: 2px solid #263238; background: #0e1315; @@ -778,7 +759,6 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -789,80 +769,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #263238; - background: #0e1315; - width: 20px; - height: 20px; - color: rgba(255, 255, 255, 0.87); - border-radius: 6px; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.3s; - color: #121212; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #9eade6; background: #9eade6; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #2d3e44; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #7f93de; background: #7f93de; color: #121212; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #2d3e44; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #7f93de; + background: #7f93de; + color: #121212; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f78c79; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #263238; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #9eade6; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #263238; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #7f93de; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #263238; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #9eade6; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #263238; - } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #7f93de; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #263238; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #9eade6; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #263238; } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #7f93de; } .p-chips { @@ -1230,36 +1172,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 6px; - } .p-inputswitch .p-inputswitch-slider { background: #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1270,25 +1190,27 @@ border-radius: 6px; transition-duration: 0.3s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #9eade6; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: rgba(255, 255, 255, 0.87); + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: rgba(158, 173, 230, 0.08); - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #8fa0e2; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: rgba(158, 173, 230, 0.08); + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #9eade6; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: rgba(255, 255, 255, 0.87); + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #8fa0e2; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f78c79; } .p-inputtext { @@ -1774,47 +1696,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #cede9c; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #263238; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #263238; background: #0e1315; @@ -1823,7 +1708,15 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #2d3e44; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1831,73 +1724,36 @@ transition-duration: 0.3s; background-color: #121212; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #9eade6; background: #9eade6; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #2d3e44; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #7f93de; background: #7f93de; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #121212; - } - .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 1px #9eade6; - border-color: #9eade6; + color: #121212; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f78c79; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #263238; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #9eade6; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #263238; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #7f93de; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #263238; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #9eade6; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #263238; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7f93de; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1910,7 +1766,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -2120,66 +1976,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #263238; } - .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: 2px solid #263238; - border-radius: 6px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #161d21; border: 2px solid #263238; color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - 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: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-highlight .p-button { - background: rgba(158, 173, 230, 0.16); - border-color: rgba(158, 173, 230, 0.16); - color: #9eade6; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #9eade6; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: rgba(158, 173, 230, 0.08); border-color: #263238; 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 { + .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: rgba(255, 255, 255, 0.6); } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: rgba(158, 173, 230, 0.16); + border-color: rgba(158, 173, 230, 0.16); + color: #9eade6; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #9eade6; + } + .p-togglebutton.p-button.p-highlight:hover { background: rgba(158, 173, 230, 0.24); border-color: rgba(158, 173, 230, 0.24); color: #9eade6; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #9eade6; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - border-color: #9eade6; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f78c79; } .p-button { @@ -2629,54 +2463,6 @@ border-color: transparent; color: #e693a9; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #0e1315; - background: #ffffff; - border: 1px solid #ffffff; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #cfd0d0; - color: #0e1315; - border-color: #cfd0d0; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #b7b8b9; - color: #0e1315; - border-color: #b7b8b9; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #ffffff; - border: 2px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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: 2px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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: 2px solid; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.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-buttonset.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-buttonset.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: #7f93de; background: transparent; @@ -6454,64 +6240,6 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } - .p-metergroup .p-metergroup-meter-container { - background: #263238; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #9eade6; - } - .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: #9eade6; - 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; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index d67acce3c4..6cd951e990 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -747,29 +747,10 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } - .p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; - } - .p-checkbox.p-checkbox-disabled { - cursor: auto; - } - .p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } .p-checkbox { width: 20px; height: 20px; } - .p-checkbox .p-checkbox-input { - border: 2px solid #e1e1e1; - border-radius: 6px; - } .p-checkbox .p-checkbox-box { border: 2px solid #e1e1e1; background: #ffffff; @@ -778,7 +759,6 @@ color: #6c6c6c; border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -789,80 +769,42 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box { - border: 2px solid #e1e1e1; - background: #ffffff; - width: 20px; - height: 20px; - color: #6c6c6c; - border-radius: 6px; - transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - outline-color: transparent; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon { - transition-duration: 0.3s; - color: #ffffff; - font-size: 14px; - } - .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { - width: 14px; - height: 14px; - } - .p-checkbox.p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight { border-color: #5472d4; background: #5472d4; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: #cecece; - } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { border-color: #3c5ece; background: #3c5ece; color: #ffffff; } - .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + border-color: #cecece; + } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + border-color: #3c5ece; + background: #3c5ece; + color: #ffffff; + } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f88c79; } - .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: #f2f2f2; - } - .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #5472d4; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f2f2f2; - } - .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3c5ece; - } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f2f2; } - .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #5472d4; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #f2f2f2; } - .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3c5ece; - } - .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: #f2f2f2; - } - .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #5472d4; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: #f2f2f2; - } - .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3c5ece; } .p-chips { @@ -1230,36 +1172,14 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } - .p-inputswitch { - position: relative; - display: inline-block; - } - .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: 6px; - } .p-inputswitch .p-inputswitch-slider { background: #cecece; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; - outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1270,25 +1190,27 @@ border-radius: 6px; transition-duration: 0.3s; } - .p-inputswitch.p-highlight .p-inputswitch-slider { - background: #5472d4; - } - .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #ffffff; + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: #b9b9b9; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: #4868d1; - } - .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + .p-inputswitch.p-focus .p-inputswitch-slider { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } - .p-inputswitch.p-invalid > .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + background: #b9b9b9; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + background: #5472d4; + } + .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + background: #ffffff; + } + .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + background: #4868d1; + } + .p-inputswitch.p-invalid .p-inputswitch-slider { border-color: #f88c79; } .p-inputtext { @@ -1774,47 +1696,10 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #8bae2c; } - .p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - } - .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-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1, 1); - visibility: visible; - } .p-radiobutton { width: 20px; height: 20px; } - .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 #e1e1e1; - border-radius: 50%; - } .p-radiobutton .p-radiobutton-box { border: 2px solid #e1e1e1; background: #ffffff; @@ -1823,7 +1708,15 @@ color: #6c6c6c; border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - outline-color: transparent; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { + border-color: #cecece; + } + .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1831,73 +1724,36 @@ transition-duration: 0.3s; background-color: #ffffff; } - .p-radiobutton.p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #5472d4; background: #5472d4; } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: #cecece; - } - .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #3c5ece; background: #3c5ece; - } - .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.1rem #bbc7ee; - border-color: #91a4e3; + color: #ffffff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f88c79; } - .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: #f2f2f2; - } - .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { - background: #5472d4; + .p-radiobutton:focus { + outline: 0 none; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f2f2; } - .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - background: #3c5ece; - } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #f2f2f2; } - .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #5472d4; } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: #f2f2f2; - } - .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3c5ece; } - .p-rating { - position: relative; - display: flex; - align-items: center; - } - .p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; - } - .p-rating.p-readonly .p-rating-item { - cursor: default; - } .p-rating { gap: 0.5rem; } - .p-rating .p-rating-item { - outline-color: transparent; - border-radius: 50%; - } .p-rating .p-rating-item .p-rating-icon { color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1910,7 +1766,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item.p-focus { + .p-rating .p-rating-item:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -2120,66 +1976,44 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } - .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: 2px solid #e1e1e1; - border-radius: 6px; - } - .p-togglebutton .p-button { + .p-togglebutton.p-button { background: #ffffff; border: 2px solid #e1e1e1; color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - 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: #898989; } - .p-togglebutton.p-highlight .p-button { - background: #ced6f1; - border-color: #ced6f1; - color: #585858; - } - .p-togglebutton.p-highlight .p-button .p-button-icon-left, - .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: #585858; - } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { background: #edf0fa; border-color: #e1e1e1; color: #6c6c6c; } - .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 { + .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: #898989; } - .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { + .p-togglebutton.p-button.p-highlight { + background: #ced6f1; + border-color: #ced6f1; + color: #585858; + } + .p-togglebutton.p-button.p-highlight .p-button-icon-left, + .p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #585858; + } + .p-togglebutton.p-button.p-highlight:hover { background: #bdc7ec; border-color: #bdc7ec; color: #585858; } - .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 { + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, + .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #585858; } - .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.1rem #bbc7ee; - border-color: #91a4e3; - } - .p-togglebutton.p-invalid > .p-button { + .p-togglebutton.p-button.p-invalid > .p-button { border-color: #f88c79; } .p-button { @@ -2629,54 +2463,6 @@ border-color: transparent; color: #d45472; } - .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { - color: #ffffff; - background: #3b3b3b; - border: 1px solid #3b3b3b; - } - .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { - background: #585858; - color: #ffffff; - border-color: #585858; - } - .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.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-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { - background: #6c6c6c; - color: #ffffff; - border-color: #6c6c6c; - } - .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { - background-color: transparent; - color: #3b3b3b; - border: 2px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.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(59, 59, 59, 0.04); - color: #3b3b3b; - border: 2px solid; - } - .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.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(59, 59, 59, 0.16); - color: #3b3b3b; - border: 2px solid; - } - .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { - background-color: transparent; - color: #3b3b3b; - border-color: transparent; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.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(59, 59, 59, 0.04); - border-color: transparent; - color: #3b3b3b; - } - .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.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(59, 59, 59, 0.16); - border-color: transparent; - color: #3b3b3b; - } .p-button.p-button-link { color: #3c5ece; background: transparent; @@ -6454,64 +6240,6 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } - .p-metergroup .p-metergroup-meter-container { - background: #ebebeb; - border-radius: 6px; - } - .p-metergroup .p-metergroup-meter { - border: 0 none; - background: #5472d4; - } - .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: #5472d4; - 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;