From e69e01e3a02afde019333abd9b17f685a2a3bdad Mon Sep 17 00:00:00 2001 From: TikouWeb <38016624+TikouWeb@users.noreply.github.com> Date: Tue, 13 Aug 2024 11:51:29 +0200 Subject: [PATCH] Stepper: add header position --- components/doc/common/apidoc/index.json | 8 + components/doc/stepper/headerdoc.js | 154 ++ components/lib/stepper/Stepper.js | 2 +- components/lib/stepper/Stepper.spec.js | 138 ++ components/lib/stepper/StepperBase.js | 50 +- .../__snapshots__/Stepper.spec.js.snap | 656 ++++++++ components/lib/stepper/stepper.d.ts | 4 + pages/stepper/index.js | 6 + public/themes/arya-blue/theme.css | 22 +- public/themes/arya-green/theme.css | 22 +- public/themes/arya-orange/theme.css | 22 +- public/themes/arya-purple/theme.css | 1373 ++++++++++++++--- public/themes/bootstrap4-dark-blue/theme.css | 22 +- .../themes/bootstrap4-dark-purple/theme.css | 22 +- public/themes/bootstrap4-light-blue/theme.css | 22 +- .../themes/bootstrap4-light-purple/theme.css | 22 +- public/themes/fluent-light/theme.css | 22 +- public/themes/lara-dark-amber/theme.css | 22 +- public/themes/lara-dark-blue/theme.css | 22 +- public/themes/lara-dark-cyan/theme.css | 22 +- public/themes/lara-dark-green/theme.css | 22 +- public/themes/lara-dark-indigo/theme.css | 22 +- public/themes/lara-dark-pink/theme.css | 22 +- public/themes/lara-dark-purple/theme.css | 101 +- public/themes/lara-dark-teal/theme.css | 22 +- public/themes/lara-light-amber/theme.css | 22 +- public/themes/lara-light-blue/theme.css | 22 +- public/themes/lara-light-cyan/theme.css | 22 +- public/themes/lara-light-green/theme.css | 22 +- public/themes/lara-light-indigo/theme.css | 22 +- public/themes/lara-light-pink/theme.css | 22 +- public/themes/lara-light-purple/theme.css | 101 +- public/themes/lara-light-teal/theme.css | 22 +- public/themes/luna-amber/theme.css | 22 +- public/themes/luna-blue/theme.css | 22 +- public/themes/luna-green/theme.css | 22 +- public/themes/luna-pink/theme.css | 22 +- public/themes/md-dark-deeppurple/theme.css | 22 +- public/themes/md-dark-indigo/theme.css | 22 +- public/themes/md-light-deeppurple/theme.css | 22 +- public/themes/md-light-indigo/theme.css | 592 +++---- public/themes/mdc-dark-deeppurple/theme.css | 22 +- public/themes/mdc-dark-indigo/theme.css | 22 +- public/themes/mdc-light-deeppurple/theme.css | 22 +- public/themes/mdc-light-indigo/theme.css | 592 +++---- public/themes/mira/theme.css | 22 +- public/themes/nano/theme.css | 22 +- public/themes/nova-accent/theme.css | 22 +- public/themes/nova-alt/theme.css | 22 +- public/themes/nova/theme.css | 22 +- public/themes/rhea/theme.css | 22 +- public/themes/saga-blue/theme.css | 22 +- public/themes/saga-green/theme.css | 22 +- public/themes/saga-orange/theme.css | 22 +- public/themes/saga-purple/theme.css | 1373 ++++++++++++++--- public/themes/soho-dark/theme.css | 22 +- public/themes/soho-light/theme.css | 22 +- public/themes/tailwind-light/theme.css | 22 +- public/themes/vela-blue/theme.css | 22 +- public/themes/vela-green/theme.css | 22 +- public/themes/vela-orange/theme.css | 22 +- public/themes/vela-purple/theme.css | 1373 ++++++++++++++--- public/themes/viva-dark/theme.css | 22 +- public/themes/viva-light/theme.css | 22 +- 64 files changed, 6264 insertions(+), 1337 deletions(-) create mode 100644 components/doc/stepper/headerdoc.js create mode 100644 components/lib/stepper/Stepper.spec.js create mode 100644 components/lib/stepper/__snapshots__/Stepper.spec.js.snap diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index deba3c73d8..d424cfd01b 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -47308,6 +47308,14 @@ "default": "0", "description": "Active step index of stepper." }, + { + "name": "headerPosition", + "optional": true, + "readonly": false, + "type": "\"left\" | \"top\" | \"bottom\" | \"right\"", + "default": "", + "description": "Position of the stepper panel header relative to the step number." + }, { "name": "linear", "optional": true, diff --git a/components/doc/stepper/headerdoc.js b/components/doc/stepper/headerdoc.js new file mode 100644 index 0000000000..0bd13bd38e --- /dev/null +++ b/components/doc/stepper/headerdoc.js @@ -0,0 +1,154 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { Button } from '@/components/lib/button/Button'; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { useRef } from 'react'; + +export function HeaderDoc(props) { + const stepperRef = useRef([]); + + const code = { + basic: ` +
Position top
+ (stepperRef.current[2] = ref)} headerPosition="top"> + + + + +
Position right
+ (stepperRef.current[0] = ref)} headerPosition="right"> + + + + +
Position left
+ (stepperRef.current[1] = ref)} headerPosition="left"> + + + + +
Position bottom
+ (stepperRef.current[2] = ref)} headerPosition="bottom"> + + + + + `, + javascript: ` +import { useRef } from 'react'; +import { Stepper } from 'primereact/stepper'; +import { StepperPanel } from 'primereact/stepperpanel'; +import { Button } from 'primereact/button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
Position top
+ (stepperRef.current[2] = ref)} headerPosition="top"> + + + + +
Position right
+ (stepperRef.current[0] = ref)} headerPosition="right"> + + + + +
Position left
+ (stepperRef.current[1] = ref)} headerPosition="left"> + + + + +
Position bottom
+ (stepperRef.current[2] = ref)} headerPosition="bottom"> + + + + + ); +} + `, + typescript: ` +import { useRef } from 'react'; +import { Stepper } from 'primereact/stepper'; +import { StepperPanel } from 'primereact/stepperpanel'; +import { Button } from 'primereact/button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
Position top
+ (stepperRef.current[2] = ref)} headerPosition="top"> + + + + +
Position right
+ (stepperRef.current[0] = ref)} headerPosition="right"> + + + + +
Position left
+ (stepperRef.current[1] = ref)} headerPosition="left"> + + + + +
Position bottom
+ (stepperRef.current[2] = ref)} headerPosition="bottom"> + + + + + ); +} + ` + }; + + return ( + <> + +

+ Header position of the stepper can be customized using the headerPosition property. Default value is right. +

+ +
+
Position top
+ (stepperRef.current[0] = ref)} headerPosition="top"> + + + + +
Position right
+ (stepperRef.current[1] = ref)} headerPosition="right"> + + + + +
Position left
+ (stepperRef.current[2] = ref)} headerPosition="left"> + + + + +
Position bottom
+ (stepperRef.current[3] = ref)} headerPosition="bottom"> + + + + +
+
+
+ + + ); +} diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js index e169cbc9c0..d21d010133 100644 --- a/components/lib/stepper/Stepper.js +++ b/components/lib/stepper/Stepper.js @@ -135,7 +135,7 @@ export const Stepper = React.memo( return stepperPanels().map((step, index) => { const panelProps = mergeProps( { - className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index })), + className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index, headerPosition: props.headerPosition, orientation: props.orientation })), 'aria-current': isStepActive(index) && 'step', role: 'presentation', 'data-p-highlight': isStepActive(index), diff --git a/components/lib/stepper/Stepper.spec.js b/components/lib/stepper/Stepper.spec.js new file mode 100644 index 0000000000..25a6c0eb53 --- /dev/null +++ b/components/lib/stepper/Stepper.spec.js @@ -0,0 +1,138 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { snapshot } from '../../test'; +import { PrimeReactProvider } from '../api/Api'; +import { Stepper } from './Stepper'; +import { StepperPanel } from '../stepperpanel/StepperPanel'; + +function assertSelectedStep(expectedIndex) { + const selectedStep = screen.getByRole('presentation', { current: 'step' }); + const expectedStep = screen.getByRole('list').children.item(expectedIndex); + + expect(expectedStep).toEqual(selectedStep); +} + +describe('Stepper', () => { + snapshot( + + + , + 'default' + ); + snapshot( + + + + + , + 'panels' + ); + snapshot( + + + + + , + 'vertical' + ); + snapshot( + + + + , + 'header position top' + ); + snapshot( + + + + , + 'header position right' + ); + snapshot( + + + + , + 'header position bottom' + ); + snapshot( + + + + , + 'header position left' + ); + + test('Step should have aria step when selected', async () => { + render( + + + + + + ); + + await userEvent.click(screen.getByRole('tab', { name: '3 Header III' })); + assertSelectedStep(2); + }); + + test('Control active step from outside', async () => { + render( + + + + + + + + ); + + assertSelectedStep(3); + }); + + test('Changing step should trigger onChangeStep callback', async () => { + const onChangeStep = jest.fn(); + + render( + + + + + + ); + + await userEvent.click(screen.getByRole('tab', { name: '2 Header II' })); + expect(onChangeStep).toHaveBeenCalledTimes(1); + + await userEvent.click(screen.getByRole('tab', { name: '3 Header III' })); + expect(onChangeStep).toHaveBeenCalledTimes(2); + }); + + test('Change steps with buttons', async () => { + const stepperRef = React.createRef(null); + const onChangeStep = jest.fn(); + + render( +
+ + + + + + + +
+ ); + + const nextButton = screen.getByRole('button', { name: 'Next' }); + + await userEvent.click(nextButton); + + expect(onChangeStep).toHaveBeenCalledTimes(1); + + assertSelectedStep(1); + }); +}); diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js index de2c602d20..832077751e 100644 --- a/components/lib/stepper/StepperBase.js +++ b/components/lib/stepper/StepperBase.js @@ -10,10 +10,11 @@ const classes = { }), nav: 'p-stepper-nav', stepper: { - header: ({ isStepActive, isItemDisabled, index }) => { + header: ({ isStepActive, isItemDisabled, index, headerPosition, orientation }) => { return classNames('p-stepper-header', { 'p-highlight': isStepActive(index), - 'p-disabled': isItemDisabled(index) + 'p-disabled': isItemDisabled(index), + [`p-stepper-header-${headerPosition}`]: orientation === 'horizontal' }); }, action: 'p-stepper-action p-component', @@ -45,42 +46,66 @@ const styles = ` list-style-type: none; overflow-x: auto; } - + .p-stepper-vertical .p-stepper-nav { flex-direction: column; } - + .p-stepper-header { position: relative; display: flex; flex: 1 1 auto; align-items: center; - + &:last-of-type { flex: initial; } } - + + .p-stepper-header-bottom { + align-items: flex-start; + } + + .p-stepper-header-top { + align-items: flex-end; + } + + .p-stepper-header-right, .p-stepper-header-left { + align-items: center; + } + .p-stepper-header .p-stepper-action { border: 0 none; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; - + &:focus-visible { @include focused(); } } - + + .p-stepper-header-bottom .p-stepper-action { + flex-direction: column; + } + + .p-stepper-header-top .p-stepper-action { + flex-direction: column-reverse; + } + + .p-stepper-header-left .p-stepper-action { + flex-direction: row-reverse; + } + .p-stepper.p-stepper-readonly .p-stepper-header { cursor: auto; } - + .p-stepper-header.p-highlight .p-stepper-action { cursor: default; } - + .p-stepper-title { display: block; white-space: nowrap; @@ -88,14 +113,14 @@ const styles = ` text-overflow: ellipsis; max-width: 100%; } - + .p-stepper-number { position: relative; display: flex; align-items: center; justify-content: center; } - + .p-stepper-separator { flex: 1 1 0; } @@ -107,6 +132,7 @@ export const StepperBase = ComponentBase.extend({ __TYPE: 'Stepper', activeStep: 0, orientation: 'horizontal', + headerPosition: 'right', linear: false, onChangeStep: null }, diff --git a/components/lib/stepper/__snapshots__/Stepper.spec.js.snap b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap new file mode 100644 index 0000000000..9e912e9ee5 --- /dev/null +++ b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap @@ -0,0 +1,656 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Stepper default 1`] = ` +
+
+
    +
    +
    +
+`; + +exports[`Stepper header position bottom 1`] = ` +
+
+
    + + +
+
+
+ +
+
+
+
+`; + +exports[`Stepper header position left 1`] = ` +
+
+
    + + +
+
+
+ +
+
+
+
+`; + +exports[`Stepper header position right 1`] = ` +
+
+
    + + +
+
+
+ +
+
+
+
+`; + +exports[`Stepper header position top 1`] = ` +
+
+
    + + +
+
+
+ +
+
+
+
+`; + +exports[`Stepper panels 1`] = ` +
+
+
    + + + +
+
+
+ +
+
+
+
+`; + +exports[`Stepper vertical 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+`; diff --git a/components/lib/stepper/stepper.d.ts b/components/lib/stepper/stepper.d.ts index 8f591b77b7..9d8454b7ab 100644 --- a/components/lib/stepper/stepper.d.ts +++ b/components/lib/stepper/stepper.d.ts @@ -109,6 +109,10 @@ export interface StepperProps { * @defaultValue horizontal */ orientation?: 'horizontal' | 'vertical' | undefined; + /** + * Position of the stepper panel header relative to the step number. + */ + headerPosition?: 'top' | 'right' | 'bottom' | 'left' | undefined; /** * Whether the steps are clickable or not. * @defaultValue false diff --git a/pages/stepper/index.js b/pages/stepper/index.js index 85d50c9672..69da8c0eb7 100644 --- a/pages/stepper/index.js +++ b/pages/stepper/index.js @@ -8,6 +8,7 @@ import { Wireframe } from '@/components/doc/stepper/pt/wireframe'; import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc'; import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc'; import { VerticalDoc } from '@/components/doc/stepper/verticaldoc'; +import { HeaderDoc } from '@/components/doc/stepper/headerdoc'; const StepperDemo = () => { const docs = [ @@ -31,6 +32,11 @@ const StepperDemo = () => { label: 'Linear', component: LinearDoc }, + { + id: 'header', + label: 'Header', + component: HeaderDoc + }, { id: 'accessibility', label: 'Accessibility', diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index fac11bfa67..3bf5cbcaca 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 1ac25d3639..4151cade1a 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 20399a9050..05c614f0f3 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index df168d53fa..884da8bfc1 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -639,6 +639,7 @@ border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -649,6 +650,15 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-cascadeselect.p-variant-filled { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -689,42 +699,62 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.5rem 1rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 1rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #383838; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #383838; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #383838; + .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; @@ -733,6 +763,7 @@ 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; @@ -743,64 +774,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .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: #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 { border-color: #ba68c8; background: #ba68c8; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #ba68c8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a241b2; background: #a241b2; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ba68c8; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a241b2; - background: #a241b2; - color: #ffffff; - } .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: #ba68c8; + } + .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: #a241b2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ba68c8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a241b2; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ba68c8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a241b2; + } + .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:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ba68c8; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(186, 104, 200, 0.16); + background: #383838; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +959,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ba68c8; @@ -848,6 +1053,18 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-dropdown.p-variant-filled { + background: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } + .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.5rem; } @@ -858,7 +1075,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -900,13 +1117,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -919,14 +1129,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -939,18 +1163,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; - } - .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); @@ -1017,14 +1229,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #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); @@ -1035,27 +1283,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ba68c8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.87); + 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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #b052c0; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1069,6 +1315,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ba68c8; @@ -1082,6 +1329,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1095,28 +1351,16 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } ::-webkit-input-placeholder { @@ -1148,11 +1392,69 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2rem; + } + .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 #383838; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1172,6 +1474,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1484,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1506,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1557,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 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: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -1251,8 +1661,14 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1278,22 +1694,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1310,9 +1716,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .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.5rem; } @@ -1320,7 +1723,11 @@ right: 0.5rem; 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); @@ -1351,19 +1758,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1790,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1412,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 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; @@ -1424,15 +1866,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ba68c8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #ba68c8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,31 +1874,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ba68c8; background: #ba68c8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #ba68c8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a241b2; background: #a241b2; - color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #383838; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ba68c8; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #383838; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a241b2; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ba68c8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #383838; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a241b2; } .p-rating { @@ -1610,6 +2064,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.5rem; } + .p-treeselect.p-variant-filled { + background: #383838; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } .p-treeselect .p-treeselect-label { padding: 0.5rem 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1709,44 +2172,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } - .p-togglebutton.p-button { + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid #383838; + border-radius: 3px; + } + .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 { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ba68c8; border-color: #ba68c8; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: 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 { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #b052c0; border-color: #b052c0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -1902,296 +2399,296 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; background: #78909c; border: 1px solid #78909c; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } - .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } - .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } - .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #121212; background: #ffe082; border: 1px solid #ffe082; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } - .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } - .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } - .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; @@ -3303,6 +3800,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(186, 104, 200, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3351,7 +3904,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3401,6 +3954,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: rgba(162, 65, 178, 0.16); } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3868,6 +4548,129 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(186, 104, 200, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -3877,6 +4680,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; @@ -5973,6 +6838,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ba68c8; + } + .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: #ba68c8; + 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 859d39faa3..75bf9a0d44 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -4634,7 +4634,6 @@ transition: color 0.15s, box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: color 0.15s, box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #8dd0ff; color: #151515; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index e8a9ae7893..cdbb5b5a00 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -4634,7 +4634,6 @@ transition: color 0.15s, box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: color 0.15s, box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #c298d8; color: #151515; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 5942ab4554..bf9de02c08 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -4634,7 +4634,6 @@ transition: box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #007bff; color: #ffffff; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index f8b3e08823..d94e86f579 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -4634,7 +4634,6 @@ transition: box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #883cae; color: #ffffff; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index ec2d677319..4dbdd58faa 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -4552,7 +4552,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #605e5c; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4562,6 +4561,24 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #edebe9; color: #323130; @@ -4611,6 +4628,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 2aa05c9327..e0c8a37616 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(251, 191, 36, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index f6a7b079de..6a50bb1a19 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 3e908649e5..7fa8b0a0a0 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(34, 211, 238, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 29e909ff43..3e28119b33 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(52, 211, 153, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index b6aa40d136..252fdde978 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(129, 140, 248, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 57b0f9b580..1c8f7149c7 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(244, 114, 182, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index 6f33f43d5e..b4326b02e8 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -1,8 +1,8 @@ :root { - font-family: "InterVariable", sans-serif; + font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family: "InterVariable", sans-serif; + --font-family: "Inter var", sans-serif; --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --surface-a: #1f2937; --surface-b: #111827; @@ -52,7 +52,7 @@ } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: normal; @@ -60,7 +60,7 @@ src: url("./fonts/InterVariable.woff2") format("woff2"); } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: italic; @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(167, 139, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4700,6 +4720,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +7018,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #a78bfa; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index e89a7a2be2..fdd0dce130 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 5c4342bec5..d22e471c0b 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #fffbeb; color: #b45309; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index e12775ae77..40251a4958 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #eff6ff; color: #1d4ed8; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index a76102b063..6889a00966 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #ecfeff; color: #0e7490; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 5bb9652ee5..9ee30d5a87 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #f0fdfa; color: #047857; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 20d30330db..d31625bf05 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #eef2ff; color: #4338ca; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 12ed791723..ca9d17463c 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #fdf2f8; color: #be185d; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index 305973982b..7935b7c8ff 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -1,8 +1,8 @@ :root { - font-family: "InterVariable", sans-serif; + font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family: "InterVariable", sans-serif; + --font-family: "Inter var", sans-serif; --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --surface-a: #ffffff; --surface-b: #f9fafb; @@ -52,7 +52,7 @@ } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: normal; @@ -60,7 +60,7 @@ src: url("./fonts/InterVariable.woff2") format("woff2"); } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: italic; @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #f5f3ff; color: #6d28d9; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4700,6 +4720,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +7018,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #8b5cf6; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index f04b1b3429..7169d95cb5 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #0f766e; color: #0f766e; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index a7520e7515..00206adce8 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #ffe082; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index e71fb82bfa..530aa4fff4 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #81d4fa; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 46fec49cdc..604f7ff69b 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #c5e1a5; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 370f57e02a..b1f04a265d 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #f48fb1; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 7d008fbd5a..058a813bce 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 1dcbd52c90..11a1385742 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 562e4e64e5..e3f46e689c 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 82f3d31c23..e3f46e689c 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -10,7 +10,7 @@ --surface-f: #ffffff; --text-color: rgba(0, 0, 0, 0.87); --text-color-secondary: rgba(0, 0, 0, 0.6); - --primary-color: #3F51B5; + --primary-color: #673AB7; --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #fafafa; @@ -44,8 +44,8 @@ --surface-hover: rgba(0, 0, 0, 0.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); - --highlight-bg: rgba(63, 81, 181, 0.12); - --highlight-text-color: #3F51B5; + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; color-scheme: light; } @@ -181,16 +181,16 @@ --red-700:#ab2f26; --red-800:#86251e; --red-900:#621b16; - --primary-50:#f5f6fb; - --primary-100:#d1d5ed; - --primary-200:#acb4df; - --primary-300:#8893d1; - --primary-400:#6372c3; - --primary-500:#3f51b5; - --primary-600:#36459a; - --primary-700:#2c397f; - --primary-800:#232d64; - --primary-900:#192048; + --primary-50:#f7f5fb; + --primary-100:#dbd0ee; + --primary-200:#beaae0; + --primary-300:#a185d2; + --primary-400:#845fc5; + --primary-500:#673ab7; + --primary-600:#58319c; + --primary-700:#482980; + --primary-800:#392065; + --primary-900:#291749; } .p-editor-container .p-editor-toolbar { @@ -274,22 +274,22 @@ .p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #3F51B5; + color: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #3F51B5; + stroke: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #3F51B5; + fill: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #3F51B5; + color: #673AB7; } @layer primereact { @@ -372,7 +372,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.5rem 0; @@ -388,8 +388,8 @@ .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; border-radius: 4px; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { @@ -422,8 +422,8 @@ background: rgba(0, 0, 0, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -439,7 +439,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-datepicker { padding: 0.5rem; @@ -500,7 +500,7 @@ } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { - color: #3F51B5; + color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -527,8 +527,8 @@ border: 1px solid transparent; } .p-datepicker table td > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker table td > span:focus { outline: 0 none; @@ -541,8 +541,8 @@ border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; @@ -595,8 +595,8 @@ border-radius: 4px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -607,8 +607,8 @@ border-radius: 4px; } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid rgba(0, 0, 0, 0.12); @@ -668,7 +668,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-cascadeselect.p-variant-filled { background-color: #f5f5f5; @@ -726,11 +726,11 @@ margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -814,22 +814,22 @@ height: 14px; } .p-checkbox.p-highlight .p-checkbox-box { - border-color: #3F51B5; - background: #3F51B5; + 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 { - border-color: #3F51B5; - background: #3F51B5; + border-color: #673AB7; + background: #673AB7; color: #ffffff; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; @@ -838,25 +838,25 @@ background-color: #f5f5f5; } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .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; + background: #673AB7; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .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; + background: #673AB7; } .p-checkbox { position: relative; @@ -876,13 +876,13 @@ background-color: #f5f5f5; } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + 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: #3F51B5; + background: #673AB7; } .p-chips { display: inline-flex; @@ -930,7 +930,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-chips .p-chips-multiple-container { padding: 0.5rem 1rem; @@ -1071,7 +1071,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-dropdown.p-variant-filled { background: #f5f5f5; @@ -1156,11 +1156,11 @@ margin-bottom: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1304,17 +1304,17 @@ transition-duration: 0.2s; } .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #3F51B5; + background: #673AB7; transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input: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 { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { outline: 0 none; @@ -1344,7 +1344,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-inputtext.p-invalid.p-component { border-color: #b00020; @@ -1511,8 +1511,8 @@ margin-bottom: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; @@ -1527,7 +1527,7 @@ background: transparent; } .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + 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); @@ -1545,7 +1545,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-listbox.p-invalid { border-color: #b00020; @@ -1574,8 +1574,8 @@ background: rgba(0, 0, 0, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect { display: inline-flex; @@ -1679,7 +1679,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-multiselect.p-variant-filled { background: #f5f5f5; @@ -1785,11 +1785,11 @@ margin-bottom: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1823,7 +1823,7 @@ } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { background: #d32f2f; @@ -1892,27 +1892,27 @@ width: 10px; height: 10px; transition-duration: 0.2s; - background-color: #3F51B5; + background-color: #673AB7; } .p-radiobutton.p-highlight .p-radiobutton-box { - border-color: #3F51B5; + 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 { - border-color: #3F51B5; + 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: #3F51B5; + 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: #3F51B5; + border-color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; @@ -1962,7 +1962,7 @@ border-radius: 50%; } .p-rating .p-rating-item .p-rating-icon { - color: #3F51B5; + color: #673AB7; 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); font-size: 1.143rem; } @@ -1979,10 +1979,10 @@ box-shadow: none; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; @@ -2049,7 +2049,7 @@ .p-slider .p-slider-handle { height: 20px; width: 20px; - background: #3F51B5; + background: #673AB7; border: 0 none; 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); @@ -2060,10 +2060,10 @@ box-shadow: none; } .p-slider .p-slider-range { - background: #3F51B5; + background: #673AB7; } .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #3F51B5; + background: #673AB7; border-color: 0 none; } .p-treeselect { @@ -2079,7 +2079,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 2rem; @@ -2261,14 +2261,14 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { color: #ffffff; - background: #3F51B5; + background: #673AB7; border: 0 none; padding: 0.714rem 1rem; font-size: 1rem; @@ -2276,28 +2276,28 @@ border-radius: 4px; } .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; border-color: transparent; } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-outlined { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined.p-button-plain { @@ -2314,17 +2314,17 @@ } .p-button.p-button-text { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-button.p-button-text.p-button-plain { @@ -2363,7 +2363,7 @@ min-width: 1rem; height: 1rem; line-height: 1rem; - color: #3F51B5; + color: #673AB7; background-color: #ffffff; } .p-button.p-button-raised { @@ -2427,11 +2427,11 @@ } .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; - background: #ff4081; + background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } @@ -2439,39 +2439,39 @@ box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #ffffff; @@ -2762,13 +2762,13 @@ color: #212121; } .p-button.p-button-link { - color: #3F51B5; + color: #673AB7; background: transparent; border: transparent; } .p-button.p-button-link:not(:disabled):hover { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-link:not(:disabled):hover .p-button-label { @@ -2781,7 +2781,7 @@ } .p-button.p-button-link:not(:disabled):active { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton { @@ -2789,16 +2789,16 @@ } .p-splitbutton.p-button-outlined > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; } .p-splitbutton.p-button-outlined.p-button-plain > .p-button { color: rgba(0, 0, 0, 0.6); @@ -2814,17 +2814,17 @@ } .p-splitbutton.p-button-text > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text.p-button-plain > .p-button { @@ -2872,31 +2872,31 @@ } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; @@ -3055,11 +3055,11 @@ .p-speeddial-action { width: 3rem; height: 3rem; - background: #ff4081; + background: #4CAF50; color: #fff; } .p-speeddial-action:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #fff; } .p-speeddial-direction-up .p-speeddial-item { @@ -3143,8 +3143,8 @@ background: #ececec; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-paginator-top { border-width: 0 0 1px 0; @@ -3198,8 +3198,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { @@ -3273,22 +3273,22 @@ font-weight: 500; } .p-datatable .p-datatable-tbody > tr > td.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { outline: 0.15rem solid transparent; outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 -2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { background: rgba(0, 0, 0, 0.04); @@ -3311,7 +3311,7 @@ color: rgba(0, 0, 0, 0.87); } .p-datatable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-datatable .p-datatable-scrollable-header, .p-datatable .p-datatable-scrollable-footer { @@ -3387,14 +3387,14 @@ background: rgba(0, 0, 0, 0.02); } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -3430,7 +3430,7 @@ padding: 1.25rem 1.25rem; } .p-datatable-drag-selection-helper { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-dataview .p-paginator-top { border-width: 0 0 1px 0; @@ -3530,8 +3530,8 @@ color: rgba(0, 0, 0, 0.6); } .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-column-filter-menu-button:focus-visible { outline: 0 none; @@ -3578,8 +3578,8 @@ border-radius: 0; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); @@ -3677,11 +3677,11 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3694,11 +3694,11 @@ color: rgba(0, 0, 0, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { - color: rgba(30, 39, 86, 0.12); + color: rgba(49, 27, 86, 0.12); } .p-organizationchart .p-organizationchart-line-down { background: rgba(0, 0, 0, 0.12); @@ -3798,9 +3798,9 @@ border-radius: 50%; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + border-color: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -3862,11 +3862,11 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-tree-container { margin: 0; @@ -3976,16 +3976,16 @@ color: rgba(0, 0, 0, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4020,7 +4020,7 @@ height: 0.5rem; } .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { - background: rgba(50, 65, 145, 0.12); + background: rgba(82, 46, 146, 0.12); } .p-treetable { position: relative; @@ -4204,8 +4204,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -4264,14 +4264,14 @@ outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4281,7 +4281,7 @@ color: rgba(0, 0, 0, 0.87); } .p-treetable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-treetable .p-treetable-scrollable-header, .p-treetable .p-treetable-scrollable-footer { @@ -4319,14 +4319,14 @@ background: rgba(0, 0, 0, 0.02); } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,9 +4654,27 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-stepper .p-stepper-header.p-highlight .p-stepper-title { color: rgba(0, 0, 0, 0.87); @@ -4668,7 +4685,7 @@ box-shadow: none; } .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper .p-stepper-panels { background: #ffffff; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4714,7 +4734,7 @@ margin-inline-start: calc(1.75rem + 2px); } .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { padding-left: 3rem; @@ -4817,21 +4837,21 @@ box-shadow: inset none; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tabview .p-tabview-close { margin-left: 0.5rem; } .p-tabview .p-tabview-nav-btn.p-link { background: #ffffff; - color: #3F51B5; + color: #673AB7; width: 3rem; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 0; @@ -4992,7 +5012,7 @@ padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { - background: #3F51B5; + background: #673AB7; color: #ffffff; width: 2.5rem; height: 2.5rem; @@ -5003,7 +5023,7 @@ right: -1.25rem; } .p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; } .p-overlaypanel:after { @@ -6227,8 +6247,8 @@ box-shadow: none; } .p-steps .p-steps-item.p-highlight .p-steps-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-steps .p-steps-item.p-highlight .p-steps-title { font-weight: 500; @@ -6275,14 +6295,14 @@ box-shadow: inset none; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tieredmenu { padding: 0.5rem 0; @@ -6660,8 +6680,8 @@ background: #ececec; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { margin-right: 0.5rem; @@ -6679,8 +6699,8 @@ background: rgba(255, 255, 255, 0.6); } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria .p-galleria-thumbnail-container { background: rgba(0, 0, 0, 0.9); @@ -6820,10 +6840,10 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-scrolltop.p-link { - background: #ff4081; + background: #4CAF50; } .p-scrolltop.p-link:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); } .p-scrolltop .p-scrolltop-icon { font-size: 1.5rem; @@ -6841,7 +6861,7 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6887,18 +6907,18 @@ box-shadow: none; } .p-metergroup .p-metergroup-meter-container { - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-metergroup .p-metergroup-meter { border: 0 none; - background: #3F51B5; + 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: #3F51B5; + background: #673AB7; width: 0.5rem; height: 0.5rem; border-radius: 100%; @@ -6947,13 +6967,13 @@ .p-progressbar { border: 0 none; height: 4px; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-progressbar .p-progressbar-value { border: 0 none; margin: 0; - background: #3F51B5; + background: #673AB7; } .p-progressbar .p-progressbar-label { color: #ffffff; @@ -6971,7 +6991,7 @@ font-size: 1rem; } .p-badge { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6980,7 +7000,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ff4081; + background-color: #4CAF50; color: #ffffff; } .p-badge.p-badge-success { @@ -7012,7 +7032,7 @@ line-height: 3rem; } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -7076,14 +7096,14 @@ opacity: 0.38; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7095,7 +7115,7 @@ .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7163,22 +7183,22 @@ min-width: auto; } .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.76); + background: rgba(103, 58, 183, 0.76); } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); } .p-button .p-ink { background-color: rgba(255, 255, 255, 0.32); } .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-button.p-button-outlined { box-shadow: inset 0 0 0 1px; @@ -7207,19 +7227,19 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { - background: rgba(255, 64, 129, 0.76); + background: rgba(76, 175, 80, 0.76); } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); } .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink { - background-color: rgba(255, 64, 129, 0.16); + background-color: rgba(76, 175, 80, 0.16); } .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { background: rgba(33, 150, 243, 0.76); @@ -7361,8 +7381,8 @@ border-color: rgba(0, 0, 0, 0.87); } .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { - border-color: #3F51B5; - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + border-color: #673AB7; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -7387,7 +7407,7 @@ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } .p-datepicker table td.p-datepicker-today.p-highlight { - box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } .p-calendar.p-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7406,7 +7426,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7418,7 +7438,7 @@ .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7463,7 +7483,7 @@ background-image: none; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger { @@ -7474,17 +7494,17 @@ border: 0 none; } .p-cascadeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-cascadeselect-item-content .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7496,7 +7516,7 @@ .p-input-filled .p-cascadeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7564,7 +7584,7 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -7573,10 +7593,10 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; @@ -7610,14 +7630,14 @@ } } .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7629,7 +7649,7 @@ .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7681,10 +7701,10 @@ background-color: rgba(0, 0, 0, 0.03); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #3F51B5; + box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #3F51B5; + box-shadow: inset 0 -2px 0 0 #673AB7; } .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; @@ -7694,17 +7714,17 @@ border: 0 none; } .p-dropdown:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-dropdown-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7716,7 +7736,7 @@ .p-input-filled .p-dropdown:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7749,15 +7769,15 @@ padding: 1rem; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; } .p-inputtext:enabled:focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.p-invalid { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7767,7 +7787,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7775,7 +7795,7 @@ .p-input-filled .p-inputtext:enabled:hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; @@ -7800,7 +7820,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7851,13 +7871,13 @@ 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), 0 0 1px 10px rgba(0, 0, 0, 0.04); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04), 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); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-fieldset .p-fieldset-legend { border: 0 none; @@ -7882,7 +7902,7 @@ } .p-float-label input:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { - color: #3F51B5; + color: #673AB7; } .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; @@ -7899,13 +7919,13 @@ background: transparent; } .p-listbox .p-listbox-list .p-listbox-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-listbox .p-listbox-list .p-listbox-item:focus { background: rgba(0, 0, 0, 0.12); } .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-megamenu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); @@ -7927,16 +7947,16 @@ border: 0 none; } .p-multiselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { background: rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); @@ -7946,7 +7966,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7958,7 +7978,7 @@ .p-input-filled .p-multiselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -8017,7 +8037,7 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-paginator { justify-content: flex-end; @@ -8026,7 +8046,7 @@ background: rgba(0, 0, 0, 0.12); } .p-paginator .p-paginator-element:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-input-filled .p-password.p-invalid > .p-inputtext { border-color: transparent; @@ -8097,7 +8117,7 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-progressbar { border-radius: 0; @@ -8116,7 +8136,7 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -8125,10 +8145,10 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { background-color: #ffffff; @@ -8152,7 +8172,7 @@ justify-content: center; } .p-rating .p-rating-item:focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-rating .p-rating-item:focus.p-rating-cancel-item { background: rgba(176, 0, 32, 0.12); @@ -8179,16 +8199,16 @@ transform: scale(0.7); } .p-slider .p-slider-handle:focus { - box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2); + box-shadow: 0 0 1px 10px rgba(76, 175, 80, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-splitbutton.p-button-outlined > .p-button { box-shadow: inset 0 0 0 1px; @@ -8216,10 +8236,10 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); @@ -8259,7 +8279,7 @@ height: 1.714rem; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { @@ -8311,7 +8331,7 @@ background: rgba(0, 0, 0, 0.12); } .p-steps .p-steps-item.p-highlight .p-steps-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-steps .p-steps-item.p-highlight .p-steps-title { @@ -8329,10 +8349,10 @@ border-radius: 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabview .p-tabview-nav .p-tabview-ink-bar { z-index: 1; @@ -8340,7 +8360,7 @@ position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-tieredmenu .p-menuitem-link:focus { @@ -8360,7 +8380,7 @@ background: rgba(0, 0, 0, 0.12); } .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; @@ -8370,17 +8390,17 @@ border: 0 none; } .p-treeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-treeselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8392,7 +8412,7 @@ .p-input-filled .p-treeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -8464,20 +8484,20 @@ border-radius: 0; } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar { display: block; position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 2699cf1b7e..134671f4ef 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 4990ea9bc3..4256d03e1e 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 973f5719bf..b4ced7a4f7 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index d851bdb639..b4ced7a4f7 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -10,7 +10,7 @@ --surface-f: #ffffff; --text-color: rgba(0, 0, 0, 0.87); --text-color-secondary: rgba(0, 0, 0, 0.6); - --primary-color: #3F51B5; + --primary-color: #673AB7; --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #fafafa; @@ -44,8 +44,8 @@ --surface-hover: rgba(0, 0, 0, 0.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); - --highlight-bg: rgba(63, 81, 181, 0.12); - --highlight-text-color: #3F51B5; + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; color-scheme: light; } @@ -181,16 +181,16 @@ --red-700:#ab2f26; --red-800:#86251e; --red-900:#621b16; - --primary-50:#f5f6fb; - --primary-100:#d1d5ed; - --primary-200:#acb4df; - --primary-300:#8893d1; - --primary-400:#6372c3; - --primary-500:#3f51b5; - --primary-600:#36459a; - --primary-700:#2c397f; - --primary-800:#232d64; - --primary-900:#192048; + --primary-50:#f7f5fb; + --primary-100:#dbd0ee; + --primary-200:#beaae0; + --primary-300:#a185d2; + --primary-400:#845fc5; + --primary-500:#673ab7; + --primary-600:#58319c; + --primary-700:#482980; + --primary-800:#392065; + --primary-900:#291749; } .p-editor-container .p-editor-toolbar { @@ -274,22 +274,22 @@ .p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #3F51B5; + color: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #3F51B5; + stroke: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #3F51B5; + fill: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #3F51B5; + color: #673AB7; } @layer primereact { @@ -372,7 +372,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -388,8 +388,8 @@ .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; border-radius: 4px; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { @@ -422,8 +422,8 @@ background: rgba(0, 0, 0, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -439,7 +439,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-datepicker { padding: 0.5rem; @@ -500,7 +500,7 @@ } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { - color: #3F51B5; + color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -527,8 +527,8 @@ border: 1px solid transparent; } .p-datepicker table td > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker table td > span:focus { outline: 0 none; @@ -541,8 +541,8 @@ border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; @@ -595,8 +595,8 @@ border-radius: 4px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -607,8 +607,8 @@ border-radius: 4px; } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid rgba(0, 0, 0, 0.12); @@ -668,7 +668,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-cascadeselect.p-variant-filled { background-color: #f5f5f5; @@ -726,11 +726,11 @@ margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -814,22 +814,22 @@ height: 14px; } .p-checkbox.p-highlight .p-checkbox-box { - border-color: #3F51B5; - background: #3F51B5; + 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 { - border-color: #3F51B5; - background: #3F51B5; + border-color: #673AB7; + background: #673AB7; color: #ffffff; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; @@ -838,25 +838,25 @@ background-color: #f5f5f5; } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .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; + background: #673AB7; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .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; + background: #673AB7; } .p-checkbox { position: relative; @@ -876,13 +876,13 @@ background-color: #f5f5f5; } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + 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: #3F51B5; + background: #673AB7; } .p-chips { display: inline-flex; @@ -930,7 +930,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; @@ -1071,7 +1071,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-dropdown.p-variant-filled { background: #f5f5f5; @@ -1156,11 +1156,11 @@ margin-bottom: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1304,17 +1304,17 @@ transition-duration: 0.2s; } .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #3F51B5; + background: #673AB7; transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input: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 { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { outline: 0 none; @@ -1344,7 +1344,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-inputtext.p-invalid.p-component { border-color: #b00020; @@ -1511,8 +1511,8 @@ margin-bottom: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; @@ -1527,7 +1527,7 @@ background: transparent; } .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + 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); @@ -1545,7 +1545,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-listbox.p-invalid { border-color: #b00020; @@ -1574,8 +1574,8 @@ background: rgba(0, 0, 0, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect { display: inline-flex; @@ -1679,7 +1679,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-multiselect.p-variant-filled { background: #f5f5f5; @@ -1785,11 +1785,11 @@ margin-bottom: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1823,7 +1823,7 @@ } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { background: #d32f2f; @@ -1892,27 +1892,27 @@ width: 10px; height: 10px; transition-duration: 0.2s; - background-color: #3F51B5; + background-color: #673AB7; } .p-radiobutton.p-highlight .p-radiobutton-box { - border-color: #3F51B5; + 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 { - border-color: #3F51B5; + 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: #3F51B5; + 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: #3F51B5; + border-color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; @@ -1962,7 +1962,7 @@ border-radius: 50%; } .p-rating .p-rating-item .p-rating-icon { - color: #3F51B5; + color: #673AB7; 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); font-size: 1rem; } @@ -1979,10 +1979,10 @@ box-shadow: none; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; @@ -2049,7 +2049,7 @@ .p-slider .p-slider-handle { height: 20px; width: 20px; - background: #3F51B5; + background: #673AB7; border: 0 none; 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); @@ -2060,10 +2060,10 @@ box-shadow: none; } .p-slider .p-slider-range { - background: #3F51B5; + background: #673AB7; } .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #3F51B5; + background: #673AB7; border-color: 0 none; } .p-treeselect { @@ -2079,7 +2079,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.75rem; @@ -2261,14 +2261,14 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { color: #ffffff; - background: #3F51B5; + background: #673AB7; border: 0 none; padding: 0.571rem 0.75rem; font-size: 1rem; @@ -2276,28 +2276,28 @@ border-radius: 4px; } .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; border-color: transparent; } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-outlined { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined.p-button-plain { @@ -2314,17 +2314,17 @@ } .p-button.p-button-text { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-button.p-button-text.p-button-plain { @@ -2363,7 +2363,7 @@ min-width: 1rem; height: 1rem; line-height: 1rem; - color: #3F51B5; + color: #673AB7; background-color: #ffffff; } .p-button.p-button-raised { @@ -2427,11 +2427,11 @@ } .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; - background: #ff4081; + background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } @@ -2439,39 +2439,39 @@ box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #ffffff; @@ -2762,13 +2762,13 @@ color: #212121; } .p-button.p-button-link { - color: #3F51B5; + color: #673AB7; background: transparent; border: transparent; } .p-button.p-button-link:not(:disabled):hover { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-link:not(:disabled):hover .p-button-label { @@ -2781,7 +2781,7 @@ } .p-button.p-button-link:not(:disabled):active { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton { @@ -2789,16 +2789,16 @@ } .p-splitbutton.p-button-outlined > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; } .p-splitbutton.p-button-outlined.p-button-plain > .p-button { color: rgba(0, 0, 0, 0.6); @@ -2814,17 +2814,17 @@ } .p-splitbutton.p-button-text > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text.p-button-plain > .p-button { @@ -2872,31 +2872,31 @@ } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; @@ -3055,11 +3055,11 @@ .p-speeddial-action { width: 3rem; height: 3rem; - background: #ff4081; + background: #4CAF50; color: #fff; } .p-speeddial-action:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #fff; } .p-speeddial-direction-up .p-speeddial-item { @@ -3143,8 +3143,8 @@ background: #ececec; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-paginator-top { border-width: 0 0 1px 0; @@ -3198,8 +3198,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { @@ -3273,22 +3273,22 @@ font-weight: 500; } .p-datatable .p-datatable-tbody > tr > td.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { outline: 0.15rem solid transparent; outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 -2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { background: rgba(0, 0, 0, 0.04); @@ -3311,7 +3311,7 @@ color: rgba(0, 0, 0, 0.87); } .p-datatable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-datatable .p-datatable-scrollable-header, .p-datatable .p-datatable-scrollable-footer { @@ -3387,14 +3387,14 @@ background: rgba(0, 0, 0, 0.02); } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -3430,7 +3430,7 @@ padding: 0.9375rem 0.9375rem; } .p-datatable-drag-selection-helper { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-dataview .p-paginator-top { border-width: 0 0 1px 0; @@ -3530,8 +3530,8 @@ color: rgba(0, 0, 0, 0.6); } .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-column-filter-menu-button:focus-visible { outline: 0 none; @@ -3578,8 +3578,8 @@ border-radius: 0; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); @@ -3677,11 +3677,11 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3694,11 +3694,11 @@ color: rgba(0, 0, 0, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { - color: rgba(30, 39, 86, 0.12); + color: rgba(49, 27, 86, 0.12); } .p-organizationchart .p-organizationchart-line-down { background: rgba(0, 0, 0, 0.12); @@ -3798,9 +3798,9 @@ border-radius: 50%; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + border-color: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -3862,11 +3862,11 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-tree-container { margin: 0; @@ -3976,16 +3976,16 @@ color: rgba(0, 0, 0, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4020,7 +4020,7 @@ height: 0.5rem; } .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { - background: rgba(50, 65, 145, 0.12); + background: rgba(82, 46, 146, 0.12); } .p-treetable { position: relative; @@ -4204,8 +4204,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -4264,14 +4264,14 @@ outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4281,7 +4281,7 @@ color: rgba(0, 0, 0, 0.87); } .p-treetable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-treetable .p-treetable-scrollable-header, .p-treetable .p-treetable-scrollable-footer { @@ -4319,14 +4319,14 @@ background: rgba(0, 0, 0, 0.02); } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,9 +4654,27 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-stepper .p-stepper-header.p-highlight .p-stepper-title { color: rgba(0, 0, 0, 0.87); @@ -4668,7 +4685,7 @@ box-shadow: none; } .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper .p-stepper-panels { background: #ffffff; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4714,7 +4734,7 @@ margin-inline-start: calc(1.75rem + 2px); } .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { padding-left: 3rem; @@ -4817,21 +4837,21 @@ box-shadow: inset none; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tabview .p-tabview-close { margin-left: 0.5rem; } .p-tabview .p-tabview-nav-btn.p-link { background: #ffffff; - color: #3F51B5; + color: #673AB7; width: 2.25rem; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 0; @@ -4992,7 +5012,7 @@ padding: 0.75rem; } .p-overlaypanel .p-overlaypanel-close { - background: #3F51B5; + background: #673AB7; color: #ffffff; width: 2rem; height: 2rem; @@ -5003,7 +5023,7 @@ right: -1rem; } .p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; } .p-overlaypanel:after { @@ -6227,8 +6247,8 @@ box-shadow: none; } .p-steps .p-steps-item.p-highlight .p-steps-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-steps .p-steps-item.p-highlight .p-steps-title { font-weight: 500; @@ -6275,14 +6295,14 @@ box-shadow: inset none; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tieredmenu { padding: 0.5rem 0; @@ -6660,8 +6680,8 @@ background: #ececec; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { margin-right: 0.5rem; @@ -6679,8 +6699,8 @@ background: rgba(255, 255, 255, 0.6); } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria .p-galleria-thumbnail-container { background: rgba(0, 0, 0, 0.9); @@ -6820,10 +6840,10 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-scrolltop.p-link { - background: #ff4081; + background: #4CAF50; } .p-scrolltop.p-link:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); } .p-scrolltop .p-scrolltop-icon { font-size: 1.5rem; @@ -6841,7 +6861,7 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6887,18 +6907,18 @@ box-shadow: none; } .p-metergroup .p-metergroup-meter-container { - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-metergroup .p-metergroup-meter { border: 0 none; - background: #3F51B5; + 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: #3F51B5; + background: #673AB7; width: 0.5rem; height: 0.5rem; border-radius: 100%; @@ -6947,13 +6967,13 @@ .p-progressbar { border: 0 none; height: 4px; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-progressbar .p-progressbar-value { border: 0 none; margin: 0; - background: #3F51B5; + background: #673AB7; } .p-progressbar .p-progressbar-label { color: #ffffff; @@ -6971,7 +6991,7 @@ font-size: 1rem; } .p-badge { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6980,7 +7000,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ff4081; + background-color: #4CAF50; color: #ffffff; } .p-badge.p-badge-success { @@ -7012,7 +7032,7 @@ line-height: 3rem; } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -7076,14 +7096,14 @@ opacity: 0.38; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7095,7 +7115,7 @@ .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7163,22 +7183,22 @@ min-width: auto; } .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.76); + background: rgba(103, 58, 183, 0.76); } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); } .p-button .p-ink { background-color: rgba(255, 255, 255, 0.32); } .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-button.p-button-outlined { box-shadow: inset 0 0 0 1px; @@ -7207,19 +7227,19 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { - background: rgba(255, 64, 129, 0.76); + background: rgba(76, 175, 80, 0.76); } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); } .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink { - background-color: rgba(255, 64, 129, 0.16); + background-color: rgba(76, 175, 80, 0.16); } .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { background: rgba(33, 150, 243, 0.76); @@ -7361,8 +7381,8 @@ border-color: rgba(0, 0, 0, 0.87); } .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { - border-color: #3F51B5; - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + border-color: #673AB7; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -7387,7 +7407,7 @@ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } .p-datepicker table td.p-datepicker-today.p-highlight { - box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } .p-calendar.p-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7406,7 +7426,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7418,7 +7438,7 @@ .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7463,7 +7483,7 @@ background-image: none; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger { @@ -7474,17 +7494,17 @@ border: 0 none; } .p-cascadeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-cascadeselect-item-content .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7496,7 +7516,7 @@ .p-input-filled .p-cascadeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7564,7 +7584,7 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -7573,10 +7593,10 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; @@ -7610,14 +7630,14 @@ } } .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7629,7 +7649,7 @@ .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7681,10 +7701,10 @@ background-color: rgba(0, 0, 0, 0.03); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #3F51B5; + box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #3F51B5; + box-shadow: inset 0 -2px 0 0 #673AB7; } .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; @@ -7694,17 +7714,17 @@ border: 0 none; } .p-dropdown:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-dropdown-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7716,7 +7736,7 @@ .p-input-filled .p-dropdown:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -7749,15 +7769,15 @@ padding: 1rem; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; } .p-inputtext:enabled:focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.p-invalid { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7767,7 +7787,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7775,7 +7795,7 @@ .p-input-filled .p-inputtext:enabled:hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; @@ -7800,7 +7820,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7851,13 +7871,13 @@ 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), 0 0 1px 10px rgba(0, 0, 0, 0.04); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04), 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); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-fieldset .p-fieldset-legend { border: 0 none; @@ -7882,7 +7902,7 @@ } .p-float-label input:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { - color: #3F51B5; + color: #673AB7; } .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; @@ -7899,13 +7919,13 @@ background: transparent; } .p-listbox .p-listbox-list .p-listbox-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-listbox .p-listbox-list .p-listbox-item:focus { background: rgba(0, 0, 0, 0.12); } .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-megamenu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); @@ -7927,16 +7947,16 @@ border: 0 none; } .p-multiselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { background: rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); @@ -7946,7 +7966,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7958,7 +7978,7 @@ .p-input-filled .p-multiselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -8017,7 +8037,7 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-paginator { justify-content: flex-end; @@ -8026,7 +8046,7 @@ background: rgba(0, 0, 0, 0.12); } .p-paginator .p-paginator-element:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-input-filled .p-password.p-invalid > .p-inputtext { border-color: transparent; @@ -8097,7 +8117,7 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-progressbar { border-radius: 0; @@ -8116,7 +8136,7 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -8125,10 +8145,10 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { background-color: #ffffff; @@ -8152,7 +8172,7 @@ justify-content: center; } .p-rating .p-rating-item:focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-rating .p-rating-item:focus.p-rating-cancel-item { background: rgba(176, 0, 32, 0.12); @@ -8179,16 +8199,16 @@ transform: scale(0.7); } .p-slider .p-slider-handle:focus { - box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2); + box-shadow: 0 0 1px 10px rgba(76, 175, 80, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-splitbutton.p-button-outlined > .p-button { box-shadow: inset 0 0 0 1px; @@ -8216,10 +8236,10 @@ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); @@ -8259,7 +8279,7 @@ height: 1.714rem; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { @@ -8311,7 +8331,7 @@ background: rgba(0, 0, 0, 0.12); } .p-steps .p-steps-item.p-highlight .p-steps-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-steps .p-steps-item.p-highlight .p-steps-title { @@ -8329,10 +8349,10 @@ border-radius: 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabview .p-tabview-nav .p-tabview-ink-bar { z-index: 1; @@ -8340,7 +8360,7 @@ position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-tieredmenu .p-menuitem-link:focus { @@ -8360,7 +8380,7 @@ background: rgba(0, 0, 0, 0.12); } .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; @@ -8370,17 +8390,17 @@ border: 0 none; } .p-treeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-treeselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8392,7 +8412,7 @@ .p-input-filled .p-treeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 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; @@ -8464,20 +8484,20 @@ border-radius: 0; } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar { display: block; position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index dfb5a34db3..9074a838a5 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -4599,7 +4599,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #81a1c1; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4609,6 +4608,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #d8dee9; color: #2e3440; @@ -4661,6 +4678,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 862928e335..3e40485eb4 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #697077; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #44a1d9; color: #ffffff; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 4ad8388007..3795243311 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -4552,7 +4552,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #848484; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4562,6 +4561,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e02365; color: #ffffff; @@ -4614,6 +4631,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index e60daec707..8000fb6e10 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #848484; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #007ad9; color: #ffffff; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 0dd4617d29..311084f692 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #848484; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #007ad9; color: #ffffff; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 8181032451..ea15705192 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -4552,7 +4552,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #a6a6a6; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4562,6 +4561,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #afd3c8; color: #385048; @@ -4614,6 +4631,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 3d4c9f5062..a1089e1d3a 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e3f2fd; color: #495057; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 6beacb008a..2f51625b67 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e8f5e9; color: #495057; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 98346ced96..608efae6de 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #fff3e0; color: #495057; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 246eedc456..420b0f8fec 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -639,6 +639,7 @@ border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #9c27b0; @@ -649,6 +650,15 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } + .p-cascadeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -689,42 +699,81 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.5rem 1rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 1rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #f8f9fa; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f8f9fa; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 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; + 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-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -733,6 +782,7 @@ 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; @@ -743,64 +793,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9c27b0; background: #9c27b0; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #9c27b0; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #7d1f8d; background: #7d1f8d; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #9c27b0; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #7d1f8d; - background: #7d1f8d; - 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: #9c27b0; + } + .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: #7d1f8d; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9c27b0; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #7d1f8d; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9c27b0; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7d1f8d; + } + .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:not(.p-disabled):hover .p-chips-multiple-container { border-color: #9c27b0; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: #f3e5f5; + background: #dee2e6; color: #495057; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #ced4da; + color: #495057; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +959,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #9c27b0; @@ -848,6 +1053,18 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } + .p-dropdown.p-variant-filled { + background: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -858,7 +1075,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -900,13 +1117,6 @@ right: 0.5rem; color: #6c757d; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -919,14 +1129,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } + .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 1rem; @@ -939,18 +1163,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1017,14 +1229,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #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; @@ -1035,27 +1283,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #9c27b0; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b6bfc8; } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #8c239e; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1069,6 +1315,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #9c27b0; @@ -1082,6 +1329,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1095,28 +1351,16 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } ::-webkit-input-placeholder { @@ -1148,11 +1392,69 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2rem; + } + .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: #495057; border: 1px solid #ced4da; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1172,6 +1474,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1484,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1506,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #495057; + background: #e9ecef; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #495057; + background: #e9ecef; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; + } .p-listbox.p-invalid { border-color: #f44336; } @@ -1236,11 +1557,100 @@ color: #495057; background: #f3e5f5; } + .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 #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #9c27b0; @@ -1251,8 +1661,14 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1278,22 +1694,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6c757d; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44336; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1310,9 +1716,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .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.5rem; } @@ -1320,7 +1723,11 @@ right: 0.5rem; color: #6c757d; } + .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: #6c757d; @@ -1351,19 +1758,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1790,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1412,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 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; @@ -1424,15 +1866,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #9c27b0; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - border-color: #9c27b0; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,31 +1874,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9c27b0; background: #9c27b0; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #9c27b0; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #7d1f8d; background: #7d1f8d; - color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44336; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8f9fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #9c27b0; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f8f9fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #7d1f8d; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #9c27b0; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f8f9fa; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #7d1f8d; } .p-rating { @@ -1610,6 +2064,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.5rem; } + .p-treeselect.p-variant-filled { + background: #f8f9fa; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-treeselect .p-treeselect-label { padding: 0.5rem 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1709,44 +2172,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-togglebutton.p-button { + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid #ced4da; + border-radius: 3px; + } + .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 { - color: #6c757d; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6c757d; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #9c27b0; border-color: #9c27b0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #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 { + color: #6c757d; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #8c239e; border-color: #8c239e; color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -1902,296 +2399,296 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } - .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } - .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } - .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #ffffff; background: #689f38; border: 1px solid #689f38; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } - .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } - .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } - .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } - .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } - .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } - .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } - .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } - .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; @@ -3303,6 +3800,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(156, 39, 176, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3351,7 +3904,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3401,6 +3954,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: #d3a1db; } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3868,6 +4548,129 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f3e5f5; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #9c27b0; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #9c27b0; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -3877,6 +4680,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5973,6 +6838,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9c27b0; + } + .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: #9c27b0; + 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 343b1e63c1..e9febd9886 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -4619,7 +4619,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4629,6 +4628,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(177, 157, 247, 0.16); color: #b19df7; @@ -4681,6 +4698,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index c03ecef86d..48e85c04ad 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -4619,7 +4619,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #708da9; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4629,6 +4628,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e2dcfc; color: #7254f3; @@ -4681,6 +4698,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 2349f6bffb..5bac5f850b 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -4605,7 +4605,6 @@ transition: none; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #71717a; font-weight: 600; transition: none; @@ -4615,6 +4614,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #eef2ff; color: #312e81; @@ -4667,6 +4684,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 8a29843612..c98c790e75 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index cc8679db73..f592645b82 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 9031897ea2..11476ec4ad 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index d037c35db7..ef2c99c712 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -639,6 +639,7 @@ border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -649,6 +650,15 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-cascadeselect.p-variant-filled { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -689,42 +699,62 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.5rem 1rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 1rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #304562; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #304562; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #304562; + .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; @@ -733,6 +763,7 @@ 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; @@ -743,64 +774,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .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: #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 { border-color: #ba68c8; background: #ba68c8; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #ba68c8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a241b2; background: #a241b2; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ba68c8; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a241b2; - background: #a241b2; - color: #ffffff; - } .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: #ba68c8; + } + .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: #a241b2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ba68c8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a241b2; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ba68c8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a241b2; + } + .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:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ba68c8; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(186, 104, 200, 0.16); + background: #304562; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3e526d; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +959,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ba68c8; @@ -848,6 +1053,18 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-dropdown.p-variant-filled { + background: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } + .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.5rem; } @@ -858,7 +1075,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -900,13 +1117,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -919,14 +1129,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -939,18 +1163,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1017,14 +1229,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #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); @@ -1035,27 +1283,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ba68c8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.87); + 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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #b052c0; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1069,6 +1315,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ba68c8; @@ -1082,6 +1329,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1095,28 +1351,16 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } ::-webkit-input-placeholder { @@ -1148,11 +1392,69 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2rem; + } + .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: #1f2d40; color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1172,6 +1474,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1484,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1506,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1557,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 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: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -1251,8 +1661,14 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1278,22 +1694,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1310,9 +1716,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .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.5rem; } @@ -1320,7 +1723,11 @@ right: 0.5rem; 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); @@ -1351,19 +1758,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1790,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1412,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 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; @@ -1424,15 +1866,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ba68c8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #ba68c8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,31 +1874,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ba68c8; background: #ba68c8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #ba68c8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a241b2; background: #a241b2; - color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #304562; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ba68c8; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #304562; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a241b2; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ba68c8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #304562; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a241b2; } .p-rating { @@ -1610,6 +2064,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.5rem; } + .p-treeselect.p-variant-filled { + background: #304562; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } .p-treeselect .p-treeselect-label { padding: 0.5rem 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1709,44 +2172,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } - .p-togglebutton.p-button { + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid #304562; + border-radius: 3px; + } + .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 { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ba68c8; border-color: #ba68c8; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: 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 { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #b052c0; border-color: #b052c0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -1902,296 +2399,296 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; background: #78909c; border: 1px solid #78909c; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } - .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } - .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } - .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #121212; background: #ffe082; border: 1px solid #ffe082; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } - .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } - .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } - .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; @@ -3303,6 +3800,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(186, 104, 200, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3351,7 +3904,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3401,6 +3954,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: rgba(162, 65, 178, 0.16); } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3868,6 +4548,129 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(186, 104, 200, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -3877,6 +4680,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; @@ -5973,6 +6838,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ba68c8; + } + .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: #ba68c8; + 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 a0f2b3d145..5f4de9c15d 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -4651,7 +4651,6 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; @@ -4661,6 +4660,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(158, 173, 230, 0.16); color: #9eade6; @@ -4713,6 +4730,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 452ea3e38a..f2ab1954a4 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -4651,7 +4651,6 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #898989; font-weight: 600; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; @@ -4661,6 +4660,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #ced6f1; color: #585858; @@ -4713,6 +4730,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px;