From 4da5a7b12a5fe3009577e3d4e8ad38aa7141e969 Mon Sep 17 00:00:00 2001 From: Ivan Date: Mon, 12 Aug 2024 22:08:19 +0200 Subject: [PATCH 01/15] Fix #7032: Passthrough options type and missing docs (#7033) * fix: InputOTP passthrough type definition * chore: Add section for theming in unstyled mode * chore: Add default styles to Tailwind theme * chore: Add inputotp to PrimeReactPTOptions --- components/doc/common/apidoc/index.json | 9 ++- .../doc/inputotp/theming/tailwinddoc.js | 55 +++++++++++++++++++ components/lib/api/api.d.ts | 5 ++ components/lib/inputotp/inputotp.d.ts | 5 +- components/lib/passthrough/tailwind/index.js | 12 ++++ pages/inputotp/index.js | 27 ++++++--- 6 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 components/doc/inputotp/theming/tailwinddoc.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index deba3c73d8..9726735a73 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -1270,6 +1270,13 @@ "type": "InputNumberPassThroughOptions", "description": "Custom passthrough(pt) options for InputNumber." }, + { + "name": "inputotp", + "optional": true, + "readonly": false, + "type": "InputOtpPassThroughOptions", + "description": "Custom passthrough(pt) options for InputOtp." + }, { "name": "inputswitch", "optional": true, @@ -31588,7 +31595,7 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputTextPassThroughOptions", + "type": "InputOtpPassThroughType>", "description": "Uses to pass attributes to the Tooltip component." }, { diff --git a/components/doc/inputotp/theming/tailwinddoc.js b/components/doc/inputotp/theming/tailwinddoc.js new file mode 100644 index 0000000000..84fc669f2c --- /dev/null +++ b/components/doc/inputotp/theming/tailwinddoc.js @@ -0,0 +1,55 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + } +} + ` + }; + + const code2 = { + javascript: ` +import React, { useState } from 'react'; +import { InputOtp } from 'primereact/inputotp'; + +export default function BasicDemo() { + const [token, setTokens] = useState(); + + return ( +
+ setTokens(e.value)}/> +
+ ); +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 3929d14b57..1204923e72 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -42,6 +42,7 @@ import { GalleriaPassThroughOptions } from '../galleria/galleria'; import { ImagePassThroughOptions } from '../image/image'; import { InplacePassThroughOptions } from '../inplace/inplace'; import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber'; +import { InputOtpPassThroughOptions } from '../inputotp/inputotp'; import { InputSwitchPassThroughOptions } from '../inputswitch/inputswitch'; import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { InputTextareaPassThroughOptions } from '../inputtextarea/inputtextarea'; @@ -447,6 +448,10 @@ export interface PrimeReactPTOptions { * Custom passthrough(pt) options for InputNumber. */ inputnumber?: InputNumberPassThroughOptions; + /** + * Custom passthrough(pt) options for InputOtp. + */ + inputotp?: InputOtpPassThroughOptions; /** * Custom passthrough(pt) options for InputSwitch. */ diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts index 8229844be0..9466a9a12a 100644 --- a/components/lib/inputotp/inputotp.d.ts +++ b/components/lib/inputotp/inputotp.d.ts @@ -9,9 +9,7 @@ */ import * as React from 'react'; import { ComponentHooks } from '../componentbase/componentbase'; -import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PassThroughOptions } from '../passthrough'; -import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { PassThroughType, TemplateType } from '../utils/utils'; export declare type InputOtpPassThroughType = PassThroughType; @@ -35,9 +33,8 @@ export interface InputOtpPassThroughOptions { root?: InputOtpPassThroughType>; /** * Uses to pass attributes to the Tooltip component. - * @see {@link TooltipPassThroughOptions} */ - input?: InputTextPassThroughOptions; + input?: InputOtpPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index bccd4f616c..ece250e1f8 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -891,6 +891,18 @@ const Tailwind = { inputmask: { root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md' }, + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + }, rating: { root: ({ props }) => ({ className: classNames('relative flex items-center', 'gap-2', { diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js index dd0dcda853..95c5c2ff85 100644 --- a/pages/inputotp/index.js +++ b/pages/inputotp/index.js @@ -1,14 +1,15 @@ -import { ImportDoc } from '@/components/doc/inputotp/importdoc'; +import DocApiTable from '@/components/doc/common/docapitable'; +import { DocComponent } from '@/components/doc/common/doccomponent'; +import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; import { BasicDoc } from '@/components/doc/inputotp/basicdoc'; -import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; +import { ImportDoc } from '@/components/doc/inputotp/importdoc'; import { IntegerOnlyDoc } from '@/components/doc/inputotp/integeronlydoc'; -import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; -import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; -import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; +import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; import { Wireframe } from '@/components/doc/inputotp/pt/wireframe'; +import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; +import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc'; -import DocApiTable from '@/components/doc/common/docapitable'; -import { DocComponent } from '@/components/doc/common/doccomponent'; +import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc'; const InputOtpDemo = () => { const docs = [ @@ -72,6 +73,18 @@ const InputOtpDemo = () => { id: 'styled', label: 'Styled', component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] } ]; From 9abd784be3be3a548fa680b2d3f9711ed87a817c Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Tue, 13 Aug 2024 11:56:42 +0530 Subject: [PATCH 02/15] fix: #7035, Dropdown: Remove unused depreciated code --- components/lib/dropdown/Dropdown.js | 75 ----------------------------- 1 file changed, 75 deletions(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ea4baf02cb..47d55b0d1e 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -30,7 +30,6 @@ export const Dropdown = React.memo( const virtualScrollerRef = React.useRef(null); const searchTimeout = React.useRef(null); const searchValue = React.useRef(null); - const currentSearchChar = React.useRef(null); const isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy; const hasFilter = ObjectUtils.isNotEmpty(filterState); const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo; @@ -582,80 +581,6 @@ export const Dropdown = React.memo( return isOptionDisabled(option) ? findPrevOption(i) : option; }; - const search = (event) => { - if (searchTimeout.current) { - clearTimeout(searchTimeout.current); - } - - if (event.ctrlKey || event.metaKey || event.altKey) { - // ignore meta combinations like CTRL+F for browser search - return; - } - - const char = event.key; - - if (char.length !== 1 || props.editable) { - // only single character keys matter for searching - return; - } - - if (currentSearchChar.current === char) { - searchValue.current = char; - } else { - searchValue.current = searchValue.current ? searchValue.current + char : char; - } - - currentSearchChar.current = char; - - if (searchValue.current) { - const searchIndex = getSelectedOptionIndex(); - - setFocusedOptionIndex(props.optionGroupLabel ? searchIndex : searchIndex + 1); - } - - searchTimeout.current = setTimeout(() => { - searchValue.current = null; - }, 250); - }; - - const searchOptionInGroup = (index) => { - const searchIndex = index === -1 ? { group: 0, option: -1 } : index; - - for (let i = searchIndex.group; i < visibleOptions.length; i++) { - let groupOptions = getOptionGroupChildren(visibleOptions[i]); - - for (let j = searchIndex.group === i ? searchIndex.option + 1 : 0; j < groupOptions.length; j++) { - if (matchesSearchValue(groupOptions[j])) { - return groupOptions[j]; - } - } - } - - for (let i = 0; i <= searchIndex.group; i++) { - let groupOptions = getOptionGroupChildren(visibleOptions[i]); - - for (let j = 0; j < (searchIndex.group === i ? searchIndex.option : groupOptions.length); j++) { - if (matchesSearchValue(groupOptions[j])) { - return groupOptions[j]; - } - } - } - - return null; - }; - - const matchesSearchValue = (option) => { - let label = getOptionLabel(option); - - if (!label) { - return false; - } - - label = label.toLocaleLowerCase(props.filterLocale); - - return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)); - }; - const onEditableInputChange = (event) => { !overlayVisibleState && show(); let searchIndex = null; From dfad4ff84046bd4620c85f5593e50a9981995b26 Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Tue, 13 Aug 2024 13:03:03 +0530 Subject: [PATCH 03/15] fix: #7037, Dropdown: Cannot change icon when expanding or collapsing options --- components/lib/dropdown/Dropdown.js | 3 ++- components/lib/dropdown/DropdownBase.js | 1 + components/lib/dropdown/dropdown.d.ts | 4 ++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ea4baf02cb..c9592c372a 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -3,6 +3,7 @@ import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../a import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; +import { ChevronUpIcon } from '../icons/chevronup'; import { SpinnerIcon } from '../icons/spinner'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; @@ -1197,7 +1198,7 @@ export const Dropdown = React.memo( }, ptm('dropdownIcon') ); - const icon = props.dropdownIcon || ; + const icon = !overlayVisibleState ? props.dropdownIcon || : props.collapseIcon || ; const dropdownIcon = IconUtils.getJSXIcon(icon, { ...dropdownIconProps }, { props }); const ariaLabel = props.placeholder || props.ariaLabel; diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index da0b19a2b3..88ac1e1563 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -170,6 +170,7 @@ export const DropdownBase = ComponentBase.extend({ dataKey: null, disabled: false, dropdownIcon: null, + collapseIcon: null, editable: false, emptyFilterMessage: null, highlightOnSelect: true, diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index 5c2fd1a2af..de11f4e693 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -281,6 +281,10 @@ export interface DropdownProps extends Omit | undefined; + /** + * Icon of collapse action. + */ + collapseIcon?: IconType | undefined; /** * When present, custom value instead of predefined options can be entered using the editable input field. * @defaultValue false From 58f860dfd0a421857b5daf64369b1793b966a415 Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Tue, 13 Aug 2024 13:07:16 +0530 Subject: [PATCH 04/15] fix: #7037, Dropdown: Cannot change icon when expanding or collapsing options --- components/doc/common/apidoc/index.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 9726735a73..ffbff74cfd 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -23172,6 +23172,14 @@ "default": "", "description": "Icon of the dropdown." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon of the collapse action." + }, { "name": "editable", "optional": true, 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 05/15] 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; From 33fede629b5a8589fb7dfb7b33223075856518cc Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 14 Aug 2024 19:50:53 +0800 Subject: [PATCH 06/15] fix: #7013 Fix RadioButton appearing without tailwind style (#7047) --- components/doc/radiobutton/theming/tailwinddoc.js | 7 ++++++- components/lib/passthrough/tailwind/index.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/components/doc/radiobutton/theming/tailwinddoc.js b/components/doc/radiobutton/theming/tailwinddoc.js index dff43339c5..1649789142 100644 --- a/components/doc/radiobutton/theming/tailwinddoc.js +++ b/components/doc/radiobutton/theming/tailwinddoc.js @@ -10,7 +10,12 @@ const Tailwind = { root: { className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6') }, - input: ({ props }) => ({ + input: { + className: classNames( + 'absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer' + ), + }, + box: ({ props }) => ({ className: classNames( 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index ece250e1f8..c6541bd0d7 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -1090,7 +1090,10 @@ const Tailwind = { root: { className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6') }, - input: ({ props }) => ({ + input: { + className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer') + }, + box: ({ props }) => ({ className: classNames( 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', From abbdf457145fa0311562b0b8df499b71fb7808f5 Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 14 Aug 2024 08:21:43 -0400 Subject: [PATCH 07/15] Fix #7046: TreeTable typescript for PT row/column (#7048) --- components/lib/treetable/treetable.d.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 4e28640577..560965101d 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -9,11 +9,13 @@ */ import * as React from 'react'; import { CSSProperties } from 'react'; -import { Column } from '../column'; +import { Column, ColumnPassThroughOptions } from '../column'; import { ComponentHooks } from '../componentbase/componentbase'; import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator'; import { PassThroughOptions } from '../passthrough'; +import { RowPassThroughOptions } from '../row/row'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TreeNode } from '../treenode'; import { IconType, PassThroughType } from '../utils/utils'; @@ -211,6 +213,19 @@ export interface TreeTablePassThroughOptions { * Uses to pass attributes to the hidden input's DOM element. */ hiddenInput?: TreeTablePassThroughType>; + /** + * Used to pass attributes to the Row helper components. + */ + row?: RowPassThroughOptions; + /** + * Used to pass attributes to the Column helper components. + */ + column?: ColumnPassThroughOptions; + /** + * Uses to pass attributes tooltip's DOM element. + * @type {TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} From 0c4eeca583a41ee86f841f591ad62543ca465078 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Wed, 14 Aug 2024 12:22:31 +0000 Subject: [PATCH 08/15] Update API doc --- components/doc/common/apidoc/index.json | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 9726735a73..66276a8aeb 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -55976,6 +55976,27 @@ "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the hidden input's DOM element." }, + { + "name": "row", + "optional": true, + "readonly": false, + "type": "RowPassThroughOptions", + "description": "Used to pass attributes to the Row helper components." + }, + { + "name": "column", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughOptions", + "description": "Used to pass attributes to the Column helper components." + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions", + "description": "Uses to pass attributes tooltip's DOM element." + }, { "name": "hooks", "optional": true, From f22e634689bd84c6a008fc7f799957faa1b3fcaf Mon Sep 17 00:00:00 2001 From: Melloware Date: Thu, 15 Aug 2024 08:10:53 -0400 Subject: [PATCH 09/15] Fix #7050: HeaderCheckbox passthrough (#7053) --- components/lib/datatable/HeaderCell.js | 4 +++- components/lib/datatable/TableHeader.js | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 7587b1fefb..56f384bf6e 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -304,7 +304,9 @@ export const HeaderCell = React.memo((props) => { if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') { const allRowsSelected = props.allRowsSelected(props.value); - return ; + return ( + + ); } return null; diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index 3216aaedeb..ddac9f50ac 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -168,11 +168,11 @@ export const TableHeader = React.memo((props) => { }); }; - const createCheckbox = (selectionMode) => { + const createCheckbox = (column, selectionMode) => { if (props.showSelectAll && selectionMode === 'multiple') { const allRowsSelected = props.allRowsSelected(props.value); - return ; + return ; } return null; @@ -209,7 +209,7 @@ export const TableHeader = React.memo((props) => { const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = ColumnBase.getCProps(col); const colStyle = { ...(filterHeaderStyle || {}), ...(style || {}) }; const colKey = columnKey || field || i; - const checkbox = createCheckbox(selectionMode); + const checkbox = createCheckbox(col, selectionMode); const filterRow = createFilter(col, filter); const headerCellProps = mergeProps( { From d2bcc1993a3725ac4f3922b12bce9bf8e2a6dcd0 Mon Sep 17 00:00:00 2001 From: KumJungMin <37934668+KumJungMin@users.noreply.github.com> Date: Fri, 16 Aug 2024 00:11:28 +0900 Subject: [PATCH 10/15] Fix #6998: add closest check condition to detect handle icon drag. (#7051) * fix: add closest check condition to detect handle icon drag. * chore: change variable name to isDraggableHandle * refactor: remove redundant logic for isDraggableHandle --- components/lib/datatable/TableBody.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 368d38effd..2a86b36dff 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -592,15 +592,12 @@ export const TableBody = React.memo( const onRowMouseDown = (e) => { const { originalEvent: event } = e; - if (!isUnstyled() && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) { - event.currentTarget.draggable = true; - event.target.draggable = false; - } else if (isUnstyled() && DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') { - event.currentTarget.draggable = true; - event.target.draggable = false; - } else { - event.currentTarget.draggable = false; - } + const isDraggableHandle = isUnstyled() + ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]') + : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle'); + + event.currentTarget.draggable = isDraggableHandle; + event.target.draggable = !isDraggableHandle; if (allowRowDrag(e)) { enableDragSelection(event, 'row'); From 2d97edeb94b6244ce6692431494b3a8be79041b9 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Fri, 16 Aug 2024 20:19:53 +0800 Subject: [PATCH 11/15] fix: #6868 Refactor location of tailwind styles (#7057) - Enable theme docs for tabview --- components/doc/tabview/theming/tailwinddoc.js | 64 +++++++++---------- components/lib/passthrough/tailwind/index.js | 47 +++++++------- pages/tabview/index.js | 13 +++- 3 files changed, 67 insertions(+), 57 deletions(-) diff --git a/components/doc/tabview/theming/tailwinddoc.js b/components/doc/tabview/theming/tailwinddoc.js index 6251d2e739..89d629a777 100644 --- a/components/doc/tabview/theming/tailwinddoc.js +++ b/components/doc/tabview/theming/tailwinddoc.js @@ -5,7 +5,7 @@ import Link from 'next/link'; export function TailwindDoc(props) { const code = { basic: ` -const Tailwind = { +const Tailwind = { tabview: { navContainer: ({ props }) => ({ className: classNames( @@ -23,30 +23,30 @@ const Tailwind = { nav: { className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles. }, - tabpanel: { - header: ({ props }) => ({ - className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. - }), - headerAction: ({ parent, context }) => ({ - className: classNames( - 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. - 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. - 'transition-colors duration-200', // Transition duration style. - 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. - { - 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': - parent.state.activeIndex !== context.index, // Condition-based hover styles. - 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. - } - ), - style: { marginBottom: '-2px' } // Negative margin style. - }), - headerTitle: { - className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. - }, - content: { - className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. - } + }, + tabpanel: { + header: ({ props }) => ({ + className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. + }), + headerAction: ({ parent, context }) => ({ + className: classNames( + 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. + 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. + 'transition-colors duration-200', // Transition duration style. + 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. + { + 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': + parent.state.activeIndex !== context.index, // Condition-based hover styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. + } + ), + style: { marginBottom: '-2px' } // Negative margin style. + }), + headerTitle: { + className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. + }, + content: { + className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. } } } @@ -55,7 +55,7 @@ const Tailwind = { const code2 = { javascript: ` -import React from 'react'; +import React from 'react'; import { TabView, TabPanel } from 'primereact/tabview'; export default function UnstyledDemo() { @@ -64,25 +64,25 @@ export default function UnstyledDemo() {

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo - enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti + At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in - culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index c6541bd0d7..b104674f16 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -250,31 +250,30 @@ const Tailwind = { }, nav: { className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles. + } + }, + tabpanel: { + header: ({ props }) => ({ + className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. + }), + headerAction: ({ parent, context }) => ({ + className: classNames( + 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. + 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. + 'transition-colors duration-200', // Transition duration style. + 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. + { + 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': parent.state.activeIndex !== context.index, // Condition-based hover styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. + } + ), + style: { marginBottom: '-2px' } // Negative margin style. + }), + headerTitle: { + className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. }, - tabpanel: { - header: ({ props }) => ({ - className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. - }), - headerAction: ({ parent, context }) => ({ - className: classNames( - 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. - 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. - 'transition-colors duration-200', // Transition duration style. - 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. - { - 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': - parent.state.activeIndex !== context.index, // Condition-based hover styles. - 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. - } - ), - style: { marginBottom: '-2px' } // Negative margin style. - }), - headerTitle: { - className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. - }, - content: { - className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. - } + content: { + className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. } }, splitter: { diff --git a/pages/tabview/index.js b/pages/tabview/index.js index c4b0e808ae..81ccd49b21 100644 --- a/pages/tabview/index.js +++ b/pages/tabview/index.js @@ -101,7 +101,18 @@ const TabViewDemo = () => { } ]; - return ; + return ( + + ); }; export default TabViewDemo; From e87c7a2e6c028ae6b022d404ccda1e00e82f4567 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 19 Aug 2024 11:27:21 +0000 Subject: [PATCH 12/15] Update API doc --- components/doc/common/apidoc/index.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 654a703474..e83dff1cf2 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -23148,6 +23148,14 @@ "default": "", "description": "Icon of the dropdown." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon of collapse action." + }, { "name": "dataKey", "optional": true, @@ -23172,14 +23180,6 @@ "default": "", "description": "Icon of the dropdown." }, - { - "name": "collapseIcon", - "optional": true, - "readonly": false, - "type": "IconType", - "default": "", - "description": "Icon of the collapse action." - }, { "name": "editable", "optional": true, From e47f620bfa69cd1b74e3f9bfdcdc9b9db38f4083 Mon Sep 17 00:00:00 2001 From: onn-software <108300141+onn-software@users.noreply.github.com> Date: Mon, 19 Aug 2024 22:03:39 +0200 Subject: [PATCH 13/15] Fix: Typo in Tailwind secondary button style (#7062) --- components/doc/button/theming/tailwinddoc.js | 6 +++--- components/lib/passthrough/tailwind/index.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js index 1a6cd357d2..9882fcc5fc 100644 --- a/components/doc/button/theming/tailwinddoc.js +++ b/components/doc/button/theming/tailwinddoc.js @@ -5,7 +5,7 @@ import Link from 'next/link'; export function TailwindDoc(props) { const code = { basic: ` -const Tailwind = { +const Tailwind = { button: { root: ({ props, context }) => ({ className: classNames( @@ -51,7 +51,7 @@ const Tailwind = { { 'bg-transparent border-transparent': props.text && !props.plain, 'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain, - 'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, + 'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain, @@ -114,7 +114,7 @@ const Tailwind = { const code2 = { javascript: ` -import React from 'react'; +import React from 'react'; import { Button } from 'primereact/button'; export default function UnstyledDemo() { diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index b104674f16..051c4f1e04 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -668,7 +668,7 @@ const Tailwind = { { 'bg-transparent border-transparent': props.text && !props.plain, 'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain, - 'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, + 'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain, From 2bc9397a2d5cf12652839f105e267e5af2390626 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 21 Aug 2024 13:49:13 +0800 Subject: [PATCH 14/15] fix: #7042 Add Tailwind styling for IconField - Create unstyled theme docs for IconField - Ensure iconPosition is passed contextually to the children of IconField - Use iconPosition to properly style InputIcon and InputText when it is enabled --- .../doc/iconfield/theming/tailwinddoc.js | 64 +++++++++++++++++++ components/lib/iconfield/IconField.js | 8 ++- components/lib/inputicon/InputIcon.js | 5 +- components/lib/inputicon/InputIconBase.js | 3 +- components/lib/inputtext/InputText.js | 3 +- components/lib/inputtext/InputTextBase.js | 3 +- components/lib/passthrough/tailwind/index.js | 17 +++++ pages/iconfield/index.js | 13 ++++ 8 files changed, 110 insertions(+), 6 deletions(-) create mode 100644 components/doc/iconfield/theming/tailwinddoc.js diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js new file mode 100644 index 0000000000..31b5d5d7f3 --- /dev/null +++ b/components/doc/iconfield/theming/tailwinddoc.js @@ -0,0 +1,64 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + iconfield: { + root: { + className: classNames('relative') + } + }, + inputicon: { + root: ({ context }) => ({ + className: classNames('absolute top-1/2 -mt-2', { + 'left-2': context.iconPosition === 'left', + 'right-2': context.iconPosition === 'right' + }) + }) + }, +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { IconField } from 'primereact/iconfield'; +import { InputIcon } from 'primereact/inputicon'; +import { InputText } from 'primereact/inputtext'; + +export default function BasicDemo() { + return ( +
+ + + + + + + + + +
+ ) +} + ` + }; + + return ( + <> + +

+ PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + + ); +} diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js index 59845ed00e..b8c8167236 100644 --- a/components/lib/iconfield/IconField.js +++ b/components/lib/iconfield/IconField.js @@ -1,4 +1,4 @@ -import React, { useContext, useRef } from 'react'; +import React, { Children, cloneElement, useContext, useRef } from 'react'; import { PrimeReactContext } from '../api/Api'; import { useMergeProps } from '../hooks/Hooks'; import { classNames } from '../utils/Utils'; @@ -29,7 +29,11 @@ export const IconField = React.memo( return (
- {props.children} + {Children.map(props.children, (child, index) => + cloneElement(child, { + iconPosition: props.iconPosition + }) + )}
); }) diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js index 4e27cbc248..105e542a51 100644 --- a/components/lib/inputicon/InputIcon.js +++ b/components/lib/inputicon/InputIcon.js @@ -13,7 +13,10 @@ export const InputIcon = React.memo( const { ptm, cx } = InputIconBase.setMetaData({ props, - ...props.__parentMetadata + ...props.__parentMetadata, + context: { + iconPosition: props.iconPosition + } }); const rootProps = mergeProps( diff --git a/components/lib/inputicon/InputIconBase.js b/components/lib/inputicon/InputIconBase.js index 283f41f741..966dd9eeae 100644 --- a/components/lib/inputicon/InputIconBase.js +++ b/components/lib/inputicon/InputIconBase.js @@ -8,7 +8,8 @@ export const InputIconBase = ComponentBase.extend({ defaultProps: { __TYPE: 'InputIcon', __parentMetadata: null, - className: null + className: null, + iconPosition: null }, css: { diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js index 9621782e17..712455e737 100644 --- a/components/lib/inputtext/InputText.js +++ b/components/lib/inputtext/InputText.js @@ -17,7 +17,8 @@ export const InputText = React.memo( props, ...props.__parentMetadata, context: { - disabled: props.disabled + disabled: props.disabled, + iconPosition: props.iconPosition } }); diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js index 8517dc67f0..fb480a41c0 100644 --- a/components/lib/inputtext/InputTextBase.js +++ b/components/lib/inputtext/InputTextBase.js @@ -26,7 +26,8 @@ export const InputTextBase = ComponentBase.extend({ onPaste: null, tooltip: null, tooltipOptions: null, - validateOnly: false + validateOnly: false, + iconPosition: null }, css: { diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 051c4f1e04..979b489e96 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -798,6 +798,10 @@ const Tailwind = { 'text-lg px-4 py-4': props.size == 'large', 'text-xs px-2 py-2': props.size == 'small', 'p-3 text-base': !props.size || typeof props.size === 'number' + }, + { + 'pl-8': context.iconPosition === 'left', + 'pr-8': props.iconPosition === 'right' } ) }) @@ -887,6 +891,19 @@ const Tailwind = { optionGroupIcon: 'ml-auto', transition: TRANSITIONS.overlay }, + iconfield: { + root: { + className: classNames('relative') + } + }, + inputicon: { + root: ({ context }) => ({ + className: classNames('absolute top-1/2 -mt-2', { + 'left-2': context.iconPosition === 'left', + 'right-2': context.iconPosition === 'right' + }) + }) + }, inputmask: { root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md' }, diff --git a/pages/iconfield/index.js b/pages/iconfield/index.js index 1863c8af43..8eec450745 100644 --- a/pages/iconfield/index.js +++ b/pages/iconfield/index.js @@ -7,6 +7,7 @@ import { TemplateDoc } from '@/components/doc/iconfield/templatedoc'; import { AccessibilityDoc } from '@/components/doc/iconfield/accessibilitydoc'; import { Wireframe } from '@/components/doc/iconfield/pt/wireframe'; import { StyledDoc } from '@/components/doc/iconfield/theming/styleddoc'; +import { TailwindDoc } from '@/components/doc/iconfield/theming/tailwinddoc'; const IconFieldDemo = () => { const docs = [ @@ -50,6 +51,18 @@ const IconFieldDemo = () => { id: 'styled', label: 'Styled', component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] } ]; From 8d6e24ff40057d3587e2676674b1c339c2fa0929 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 21 Aug 2024 13:56:00 +0800 Subject: [PATCH 15/15] chore: #7042 Add additional doc for styling --- components/doc/iconfield/theming/tailwinddoc.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js index 31b5d5d7f3..de24dd8fef 100644 --- a/components/doc/iconfield/theming/tailwinddoc.js +++ b/components/doc/iconfield/theming/tailwinddoc.js @@ -19,6 +19,19 @@ const Tailwind = { }) }) }, + // For each input wrapped with IconField you will need to add styling. + // The following is an example for InputText + inputtext: { + root: ({ props, context }) => ({ + className: classNames( + // Extend the root stylings with the following: + { + 'pl-8': context.iconPosition === 'left', + 'pr-8': props.iconPosition === 'right' + } + ) + }) + }, } ` };