From 7c36a49e6d66bc524918c1bf3a2895f19750c58f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Mon, 29 Jan 2024 15:46:16 +0300 Subject: [PATCH 01/31] Revert "Added empty message into tree" This reverts commit 4ccacafa4ed5860d822e7edab9bc945fc5a91c12. --- components/lib/tree/Tree.js | 66 ++++++++++----------------------- components/lib/tree/TreeBase.js | 2 - 2 files changed, 20 insertions(+), 48 deletions(-) diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index 610eabd594..a827e1fe68 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { localeOption, PrimeReactContext } from '../api/Api'; +import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps } from '../hooks/Hooks'; import { useUpdateEffect } from '../hooks/useUpdateEffect'; @@ -408,59 +408,33 @@ export const Tree = React.memo( ); }; - const createEmptyMessageNode = () => { - const emptyMessageProps = mergeProps( - { - className: classNames(props.contentClassName, cx('emptyMessage')) - }, - ptm('emptyMessage') - ); - - return ( -
  • - {localeOption('emptyMessage')} -
    • - ); - }; - - const createRootChildrenContainer = (children) => { - const containerProps = mergeProps( - { - className: classNames(props.contentClassName, cx('container')), - role: 'tree', - 'aria-label': props.ariaLabel, - 'aria-labelledby': props.ariaLabelledBy, - style: props.contentStyle, - ...ariaProps - }, - ptm('container') - ); + const createRootChildren = () => { + if (props.filter) { + filterChanged.current = true; + _filter(); + } - return ; - }; + const value = getRootNode(); - const createRootChildren = (value) => { return value.map((node, index) => createRootChild(node, index, index === value.length - 1)); }; const createModel = () => { if (props.value) { - if (props.filter) { - filterChanged.current = true; - _filter(); - } - - const value = getRootNode(); - - if (value.length > 0) { - const rootNodes = createRootChildren(value); - - return createRootChildrenContainer(rootNodes); - } else { - const emptyMessageNode = createEmptyMessageNode(); + const rootNodes = createRootChildren(); + const containerProps = mergeProps( + { + className: classNames(props.contentClassName, cx('container')), + role: 'tree', + 'aria-label': props.ariaLabel, + 'aria-labelledby': props.ariaLabelledBy, + style: props.contentStyle, + ...ariaProps + }, + ptm('container') + ); - return createRootChildrenContainer(emptyMessageNode); - } + return ; } return null; diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js index 3b7335bc57..5c96d169c9 100644 --- a/components/lib/tree/TreeBase.js +++ b/components/lib/tree/TreeBase.js @@ -6,7 +6,6 @@ const classes = { loadingIcon: 'p-tree-loading-icon', loadingOverlay: 'p-tree-loading-overlay p-component-overlay', searchIcon: 'p-tree-filter-icon', - emptyMessage: 'p-treenode p-tree-empty-message', filterContainer: 'p-tree-filter-container', input: 'p-tree-filter p-inputtext p-component', header: 'p-tree-header', @@ -118,7 +117,6 @@ export const TreeBase = ComponentBase.extend({ value: null, checkboxIcon: null, disabled: false, - emptyMessage: null, selectionMode: null, selectionKeys: null, onSelectionChange: null, From 0b402db8c9b071a8d4f867dc19ce2344e69abc0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 2 Feb 2024 17:41:14 +0300 Subject: [PATCH 02/31] meter-group init --- components/doc/metergroup/basicdoc.js | 74 ++ components/lib/metergroup/MeterGroup.js | 132 +++ components/lib/metergroup/MeterGroupBase.js | 106 +++ components/lib/metergroup/metergroup.d.ts | 786 ++++++++++++++++++ .../lib/progressbar/primereact.code-workspace | 30 + pages/metergroup/index.js | 17 + public/themes/arya-blue/theme.css | 71 +- public/themes/arya-green/theme.css | 71 +- public/themes/arya-orange/theme.css | 71 +- public/themes/bootstrap4-dark-blue/theme.css | 71 +- public/themes/bootstrap4-light-blue/theme.css | 71 +- public/themes/fluent-light/theme.css | 71 +- public/themes/lara-dark-amber/theme.css | 71 +- public/themes/lara-dark-blue/theme.css | 71 +- public/themes/lara-dark-cyan/theme.css | 71 +- public/themes/lara-dark-green/theme.css | 71 +- public/themes/lara-dark-indigo/theme.css | 71 +- public/themes/lara-dark-pink/theme.css | 71 +- public/themes/lara-dark-teal/theme.css | 71 +- public/themes/lara-light-amber/theme.css | 71 +- public/themes/lara-light-blue/theme.css | 71 +- public/themes/lara-light-cyan/theme.css | 71 +- public/themes/lara-light-green/theme.css | 71 +- public/themes/lara-light-indigo/theme.css | 71 +- public/themes/lara-light-pink/theme.css | 71 +- public/themes/lara-light-teal/theme.css | 71 +- public/themes/luna-amber/theme.css | 71 +- public/themes/luna-blue/theme.css | 71 +- public/themes/luna-green/theme.css | 71 +- public/themes/luna-pink/theme.css | 71 +- public/themes/md-dark-indigo/theme.css | 74 +- public/themes/md-light-indigo/theme.css | 74 +- public/themes/mdc-dark-indigo/theme.css | 74 +- public/themes/mdc-light-indigo/theme.css | 74 +- public/themes/mira/theme.css | 71 +- public/themes/nano/theme.css | 71 +- public/themes/nova-accent/theme.css | 71 +- public/themes/nova-alt/theme.css | 71 +- public/themes/nova/theme.css | 71 +- public/themes/rhea/theme.css | 71 +- public/themes/saga-blue/theme.css | 71 +- public/themes/saga-green/theme.css | 71 +- public/themes/saga-orange/theme.css | 71 +- public/themes/soho-dark/theme.css | 71 +- public/themes/soho-light/theme.css | 71 +- public/themes/tailwind-light/theme.css | 71 +- public/themes/vela-blue/theme.css | 71 +- public/themes/vela-green/theme.css | 71 +- public/themes/vela-orange/theme.css | 71 +- public/themes/viva-dark/theme.css | 71 +- public/themes/viva-light/theme.css | 71 +- 51 files changed, 4127 insertions(+), 225 deletions(-) create mode 100644 components/doc/metergroup/basicdoc.js create mode 100644 components/lib/metergroup/MeterGroup.js create mode 100644 components/lib/metergroup/MeterGroupBase.js create mode 100644 components/lib/metergroup/metergroup.d.ts create mode 100644 components/lib/progressbar/primereact.code-workspace create mode 100644 pages/metergroup/index.js diff --git a/components/doc/metergroup/basicdoc.js b/components/doc/metergroup/basicdoc.js new file mode 100644 index 0000000000..0b01c34249 --- /dev/null +++ b/components/doc/metergroup/basicdoc.js @@ -0,0 +1,74 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; + +export function BasicDoc(props) { + const code = { + basic: ` + + `, + javascript: ` +import React, { useEffect, useRef } from 'react'; +import { useMountEffect } from 'primereact/hooks'; +import { Messages } from 'primereact/messages'; + +export default function BasicDemo() { + const msgs = useRef(null); + + useMountEffect(() => { + if (msgs.current) { + msgs.current.clear(); + msgs.current.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }); + } + }); + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { useMountEffect } from 'primereact/hooks'; +import { Messages } from 'primereact/messages'; + +export default function BasicDemo() { + const msgs = useRef(null); + + useMountEffect(() => { + msgs.current?.clear(); + msgs.current?.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }); + }); + + return ( +
    + +
    + ) +} + ` + }; + + const values = [ + { color: '#239EF0', label: 'Mortgage', value: 25, icon: 'pi pi-cog' }, + { color: '#FAA419', label: 'Loan', value: 15 }, + { color: '#EE5879', label: 'Credit Card', value: 20 } + ]; + + return ( + <> + +

    + Messages are displayed by calling the show method provided by the component ref. A single message is specified by the Message interface that defines various properties such as severity, summary and{' '} + detail +

    +     +
    + +
    + + + ); +} diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js new file mode 100644 index 0000000000..b6acba3d39 --- /dev/null +++ b/components/lib/metergroup/MeterGroup.js @@ -0,0 +1,132 @@ +import { useContext } from 'react'; +import { useMergeProps } from '../hooks/Hooks'; +import { PrimeReactContext } from '../api/Api'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; +import { MeterGroupBase } from './MeterGroupBase'; +import { useHandleStyle } from '../componentbase/ComponentBase'; + +export const MeterGroup = (inProps) => { + const context = useContext(PrimeReactContext); + const props = MeterGroupBase.getProps(inProps, context); + const { values, min, max, orientation, labelPosition } = props; + + const mergeProps = useMergeProps(); + const { ptm, cx, isUnstyled } = MeterGroupBase.setMetaData({ + props, + ...props.__parentMetadata, + context: { + disabled: props.disabled + } + }); + + useHandleStyle(MeterGroupBase.css.styles, isUnstyled, { name: 'progressbar' }); + + const totalPercent = values.reduce((acc, val) => acc + val.value, 0); + + const calculatePercentage = (meter = 0) => { + const percentageOfItem = ((meter - min) / (max - min)) * 100; + + return Math.round(Math.max(0, Math.min(100, percentageOfItem))); + }; + + const rootProps = mergeProps( + { + className: classNames(props.className, cx('root', { orientation })) + }, + MeterGroupBase.getOtherProps(props), + ptm('root') + ); + + const createMeters = () => { + const meters = values.map((item, index) => { + const meterInlineStyles = { + backgroundColor: item.color, + width: orientation === 'horizontal' && calculatePercentage(item.value) + '%', + height: orientation === 'vertical' && calculatePercentage(item.value) + '%' + }; + + const meterProps = mergeProps( + { + className: cx('meter'), + style: meterInlineStyles + }, + ptm('meter') + ); + + return ; + }); + + const meterContainerProps = mergeProps( + { + className: cx('metercontainer') + }, + ptm('metercontainer') + ); + + return
    {meters}
    ; + }; + + const createLabelList = () => { + const labelListProps = mergeProps( + { + className: cx('labellist') + }, + ptm('labellist') + ); + + const labelItemProps = mergeProps( + { + className: cx('labellistitem') + }, + ptm('labellistitem') + ); + + const labelProps = mergeProps( + { + className: cx('label') + }, + ptm('label') + ); + + return ( +
      + {values.map((item, index) => { + const labelIconProps = mergeProps( + { + className: classNames(cx('labelicon'), item.icon), + style: { color: item.color } + }, + ptm('labelicon') + ); + + const labelListIconProps = mergeProps( + { + className: cx('labellisttype'), + style: { backgroundColor: item.color } + }, + ptm('labellisttype') + ); + + const labelIcon = item.icon ? : ; + + return ( +
    1. + {labelIcon} + + {item.label} ({item.value}%) + +
      2. + ); + })} +
    + ); + }; + + return ( +
    + {labelPosition === 'start' && createLabelList()} + {createMeters()} + {labelPosition === 'end' && createLabelList()} +
    + ); +}; diff --git a/components/lib/metergroup/MeterGroupBase.js b/components/lib/metergroup/MeterGroupBase.js new file mode 100644 index 0000000000..e60a27ebd0 --- /dev/null +++ b/components/lib/metergroup/MeterGroupBase.js @@ -0,0 +1,106 @@ +import { ComponentBase } from '../componentbase/ComponentBase'; +import { classNames } from '../utils/Utils'; + +const classes = { + root: ({ props }) => [ + classNames('p-metergroup p-component', { + 'p-metergroup-horizontal': props.orientation === 'horizontal', + 'p-metergroup-vertical': props.orientation === 'vertical' + }) + ], + metercontainer: 'p-metergroup-meter-container', + meter: 'p-metergroup-meter', + labellist: ({ props }) => + classNames('p-metergroup-label-list', { + 'p-metergroup-label-list-start': props.labelPosition === 'start', + 'p-metergroup-label-list-end': props.labelPosition === 'end', + 'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical', + 'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal' + }), + labellistitem: 'p-metergroup-label-list-item', + labelicon: 'p-metergroup-label-icon', + labellisttype: 'p-metergroup-label-type', + label: 'p-metergroup-label' +}; + +const styles = ` +@layer primereact { + .p-metergroup { + overflow: hidden; + position: relative; + } + + .p-metergroup-vertical.p-metergroup { + height: 100%; + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meter-container { + flex-direction: column; + } + + .p-metergroup-meter-container { + display: flex; + } + + .p-metergroup-meter { + display: flex; + } + + .p-metergroup-label-list { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-metergroup-vertical .p-metergroup-label-list { + align-items: start; + } + + .p-metergroup-horizontal .p-metergroup-label-list-vertical { + flex-direction: column; + } + + .p-metergroup-horizontal .p-metergroup-meter { + height: 100%; + } + + .p-metergroup-vertical .p-metergroup-label-list-horizontal { + flex-direction: column; + } + + .p-metergroup-vertical .p-metergroup-meter { + width: 100%; + } + + + .p-metergroup-label-list-item { + display: inline-flex; + align-items: center; + } + + .p-metergroup-label-type { + display: inline-block; + } +} +`; + +export const MeterGroupBase = ComponentBase.extend({ + defaultProps: { + __TYPE: 'MeterGroup', + __parentMetadata: null, + children: undefined, + className: null, + values: null, + min: 0, + max: 100, + orientation: 'horizontal', + labelPosition: 'end', + labelOrientation: 'horizontal' + }, + css: { + classes, + styles + } +}); diff --git a/components/lib/metergroup/metergroup.d.ts b/components/lib/metergroup/metergroup.d.ts new file mode 100644 index 0000000000..9ffbe0aa17 --- /dev/null +++ b/components/lib/metergroup/metergroup.d.ts @@ -0,0 +1,786 @@ +/** + * + * MultiSelect is used to select multiple items from a collection. + * + * [Live Demo](https://www.primereact.org/multiselect/) + * + * @module multiselect + * + */ +import * as React from 'react'; +import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition'; +import { CheckboxPassThroughOptions } from '../checkbox/checkbox'; +import { ComponentHooks } from '../componentbase/componentbase'; +import { CSSTransitionProps } from '../csstransition/csstransition'; +import { PassThroughOptions } from '../passthrough'; +import { SelectItemOptionsType } from '../selectitem/selectitem'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; +import { TooltipOptions } from '../tooltip/tooltipoptions'; +import { IconType, PassThroughType } from '../utils/utils'; +import { VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller/virtualscroller'; + +export declare type MultiSelectPassThroughType = PassThroughType; +export declare type MultiSelectPassThroughTransitionType = ReactCSSTransitionProps | ((options: MultiSelectPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface MultiSelectPassThroughMethodOptions { + props: MultiSelectProps; + state: MultiSelectState; + context: MultiSelectContext; +} + +/** + * Custom passthrough(pt) options. + * @see {@link MultiSelectProps.pt} + */ +export interface MultiSelectPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the input's DOM element. + */ + input?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the label container's DOM element. + */ + labelContainer?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the label's DOM element. + */ + label?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the token's DOM element. + */ + token?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the token label's DOM element. + */ + tokenLabel?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the remove token icon's DOM element. + */ + removeTokenIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the trigger's DOM element. + */ + trigger?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the trigger icon's DOM element. + */ + triggerIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the clear icon's DOM element. + */ + clearIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the dropdown icon's DOM element. + */ + dropdownIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the panel's DOM element. + */ + panel?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the header checkbox's DOM element. + */ + headerCheckbox?: CheckboxPassThroughOptions; + /** + * Uses to pass attributes to the header checkbox's container DOM element. + */ + headerCheckboxContainer?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the header checkbox icon's DOM element. + */ + headerCheckboxIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the header checkbox's DOM element. + */ + headerSelectAllLabel?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the filter container's DOM element. + */ + filterContainer?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the filter input's DOM element. + */ + filterInput?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the filter icon's DOM element. + */ + filterIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the close button's DOM element. + */ + closeButton?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the close icon's DOM element. + */ + closeIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the wrapper's DOM element. + */ + wrapper?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the VirtualScroller component. + * @see {@link VirtualScrollerPassThroughOptions} + */ + virtualScroller?: VirtualScrollerPassThroughOptions; + /** + * Uses to pass attributes to the list's DOM element. + */ + list?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the item group's DOM element. + */ + itemGroup?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the item's DOM element. + */ + item?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the checkbox container's DOM element. + */ + checkboxContainer?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the checkbox's DOM element. + */ + checkbox?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the checkbox icon's DOM element. + */ + checkboxIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the emptyMessage's DOM element. + */ + emptyMessage?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes to the hidden input wrapper's DOM element. + */ + hiddenInputWrapper?: MultiSelectPassThroughType>; + /** + * Uses to pass attributes tooltip's DOM element. + * @type {TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; + /** + * Used to manage all lifecycle hooks + * @see {@link ComponentHooks} + */ + hooks?: ComponentHooks; + /** + * Used to control React Transition API. + */ + transition?: MultiSelectPassThroughTransitionType; +} + +/** + * Defines current inline state in MultiSelect component. + */ +export interface MultiSelectState { + /** + * Current focused state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current filter state as a string. + */ + filterState: string; + /** + * Current overlay visible state as a boolean. + * @defaultValue false + */ + overlayVisible: boolean; +} + +/** + * Defines current options in MultiSelect component. + */ +export interface MultiSelectContext { + /** + * Current selection state of the item as a boolean. + * @defaultValue false + */ + selected: boolean; +} + +/** + * Custom checkbox change event + * @see {@link MultiSelectPanelHeaderTemplateEvent.onChange} + * @event + */ +interface MultiSelectHeaderCheckboxChangeEvent { + originalEvent: React.FormEvent; + checked: boolean; +} + +/** + * Custom multiselect panel header template event. + */ +interface MultiSelectPanelHeaderTemplateEvent { + /** + * The class name for the header element. + */ + className: string; + /** + * The checkbox element for selecting items. + */ + checkboxElement: HTMLElement; + /** + * Whether the checkbox is checked. + */ + checked: boolean; + /** + * Callback function when the checkbox state is changed. + * @param {MultiSelectHeaderCheckboxChangeEvent} event - Custom checkbox change event + */ + onChange(event: MultiSelectHeaderCheckboxChangeEvent): void; + /** + * The element for filtering the items. + */ + filterElement: JSX.Element; + /** + * The close element. + */ + closeElement: JSX.Element; + /** + * The classname for the close element. + */ + closeElementClassName: string; + /** + * The classname for the close icon element. + */ + closeIconClassName: string; + /** + * Callback function when the close button is clicked. + * @param {React.MouseEvent} event - Current param + */ + onCloseClick(event: React.MouseEvent): void; + /** + * The default element created by the component. + */ + element: JSX.Element; + /** + * The props of Multiselect component + */ + props: MultiSelectProps; +} + +/** + * Custom multiselect change target options + */ +interface MultiSelectChangeTargetOptions { + /** + * The name of the element. + */ + name: string; + /** + * Unique identifier of the element. + */ + id: string; + /** + * The value of the element. + */ + value: any; +} + +/** + * Custom change event. + * @see {@link MultiSelectProps.onChange} + * @event + */ +interface MultiSelectChangeEvent { + /** + * Browser event + */ + originalEvent: React.SyntheticEvent; + /** + * Current selected values + */ + value: any; + /** + * Selected option + */ + selectedOption?: any; + /** + * Stops the event from propagating. + */ + stopPropagation(): void; + /** + * Prevents the default action of the event. + */ + preventDefault(): void; + /** + * Additional information about the event. + */ + target: MultiSelectChangeTargetOptions; +} + +/** + * Custom remove event when chip is removed. + * @event + */ +interface MultiSelectRemoveEvent { + /** + * Browser event + */ + originalEvent: React.SyntheticEvent; + /** + * Removed item value + */ + value: any; +} + +/** + * Custom filter event. + * @see {@link MultiSelectProps.onFilter} + * @event + */ +interface MultiSelectFilterEvent { + /** + * Browser event. + */ + originalEvent: React.SyntheticEvent; + /** + * Filter value. + */ + filter: string; +} + +/** + * Custom select event. + * @see {@link MultiSelectProps.onSelectAll} + * @event + */ +interface MultiSelectAllEvent { + /** + * Browser event. + */ + originalEvent: React.SyntheticEvent; + /** + * Whether all data is selected. + */ + checked: boolean; +} + +/** + * Multiselect filter options + */ +interface MultiSelectFilterOptions { + /** + * Used to filter options + * @param {KeyboardEvent} event - Browser event + */ + filter?: (event?: KeyboardEvent) => void; + /** + * Used to reset the filtered options + */ + reset?: () => void; +} + +/** + * Custom filter template options. + */ +interface MultiSelectTemplateOptions { + /** + * Style class of the filter. + */ + className: string; + /** + * The filter element. + */ + element: HTMLDivElement; + /** + * Style class of the filter icon. + */ + filterIconClassName: string; + /** + * The filter input options. + */ + filterOptions?: MultiSelectFilterOptions; + /** + * The props of multiselect header. + */ + props?: any; +} + +/** + * Defines valid properties in MultiSelect component. In addition to these, all properties of HTMLDivElement can be used in this component. + * @group Properties + */ +export interface MultiSelectProps extends Omit, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> { + /** + * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. + * @defaultValue document.body + */ + appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement); + /** + * Establishes relationships between the component and label(s) where its value should be one or more element IDs. + */ + ariaLabelledBy?: string | undefined; + /** + * Used to get the child elements of the component. + * @readonly + */ + children?: React.ReactNode | undefined; + /** + * Icon of the checkbox when checked. + */ + checkboxIcon?: IconType | undefined; + /** + * Style class of the element. + */ + className?: string | undefined; + /** + * Close icon of the multiselect panel header. + */ + closeIcon?: IconType | undefined; + /** + * Clear icon of the multiselect input. + */ + clearIcon?: IconType | undefined; + /** + * A property to uniquely match the value in options for better performance. + */ + dataKey?: string | undefined; + /** + * When present, it specifies that the component should be disabled. + * @defaultValue false + */ + disabled?: boolean | undefined; + /** + * Used mode to display the selected item. Valid values are 'comma' and 'chip'. + * @defaultValue comma + */ + display?: 'comma' | 'chip' | undefined; + /** + * Icon class of the dropdown icon. + */ + dropdownIcon?: IconType; + /** + * Template to display when filtering does not return any results. + * @defaultValue No records found + */ + emptyFilterMessage?: React.ReactNode | ((props: MultiSelectProps) => React.ReactNode); + /** + * Text to display when there are no options available. Defaults to global value in Locale configuration. + */ + emptyMessage?: string; + /** + * When specified, displays an input field to filter the items on keyup. + * @defaultValue true + */ + filter?: boolean | undefined; + /** + * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. + * @defaultValue label + */ + filterBy?: string | undefined; + /** + * When the panel is opened, it specifies that the filter input should focus automatically. + * @defaultValue true + */ + filterInputAutoFocus?: boolean | undefined; + /** + * Icon of the filter icon. + */ + filterIcon?: IconType | undefined; + /** + * Locale to use in filtering. The default locale is the host environment's current locale. + * @defaultValue undefined + */ + filterLocale?: string | undefined; + /** + * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals". + * @defaultValue contains + */ + filterMatchMode?: string | undefined; + /** + * Placeholder text to show when filter input is empty. + */ + filterPlaceholder?: string | undefined; + /** + * The template of filter element. + */ + filterTemplate?: React.ReactNode | ((options: MultiSelectTemplateOptions) => React.ReactNode); + /** + * Whether to display selected items in the label section or always display the placeholder as the default label. + * @defaultValue false + */ + fixedPlaceholder?: boolean | undefined; + /** + * Use flex layout for the items panel. + * @defaultValue false + */ + flex?: boolean | undefined; + /** + * Unique identifier of the element. + */ + id?: string | undefined; + /** + * Render the items panel inline. + * @defaultValue false + */ + inline?: boolean | undefined; + /** + * Identifier of the focusable input. + */ + inputId?: string | undefined; + /** + * Reference of the input element. + */ + inputRef?: React.Ref; + /** + * Style class of the items. + */ + itemClassName?: string | undefined; + /** + * The icon displayed in the header when all checkboxes are checked. + */ + itemCheckboxIcon?: IconType | undefined; + /** + * Function that gets the option and returns the content for it. + */ + itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode); + /** + * Decides how many selected item labels to show at most. + */ + maxSelectedLabels?: number | undefined; + /** + * Name of the input element. + */ + name?: string | undefined; + /** + * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. + */ + optionDisabled?: string | ((option: any) => boolean); + /** + * Property name or getter function that refers to the children options of option group. + */ + optionGroupChildren?: string | undefined; + /** + * Property name or getter function to use as the label of an option group. + */ + optionGroupLabel?: string | undefined; + /** + * Template of an option group item. + */ + optionGroupTemplate?: React.ReactNode | ((option: any, index: number) => React.ReactNode); + /** + * Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options. + */ + optionLabel?: string | undefined; + /** + * Property name or getter function to use as the value of an option, defaults to the option itself when not defined. + */ + optionValue?: string | undefined; + /** + * An array of selectitems to display as the available options. + */ + options?: SelectItemOptionsType | undefined; + /** + * Specifies the visibility of the overlay panel. + * @defaultValue false + */ + overlayVisible?: boolean | undefined; + /** + * Style class of the overlay panel element. + */ + panelClassName?: string | undefined; + /** + * Template of the panel footer. + */ + panelFooterTemplate?: React.ReactNode | ((props: MultiSelectProps, hide: () => void) => React.ReactNode); + /** + * Template of the panel header. + */ + panelHeaderTemplate?: React.ReactNode | ((event: MultiSelectPanelHeaderTemplateEvent) => React.ReactNode); + /** + * Inline style of the overlay panel element. + */ + panelStyle?: React.CSSProperties | undefined; + /** + * Label to display when there are no selections. + */ + placeholder?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {MultiSelectPassThroughOptions} + */ + pt?: MultiSelectPassThroughOptions; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; + /** + * Icon of the remove chip element. + */ + removeIcon?: IconType | undefined; + /** + * Clears the filter value when hiding the dropdown. + * @defaultValue false + */ + resetFilterOnHide?: boolean | undefined; + /** + * Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. + * @defaultValue 200px + */ + scrollHeight?: string | undefined; + /** + * Whether all data is selected. + * @defaultValue false + */ + selectAll?: boolean | undefined; + /** + * Function that gets an item in the value and returns the content for it. + */ + selectedItemTemplate?: React.ReactNode | ((value: any) => React.ReactNode); + /** + * Label to display after exceeding max selected labels. + * @defaultValue {0} items selected + */ + selectedItemsLabel?: string | undefined; + /** + * Number of maximum options that can be selected. + */ + selectionLimit?: number | undefined; + /** + * When enabled, a clear icon is displayed to clear the value. + * @defaultValue false + */ + showClear?: boolean | undefined; + /** + * Whether to show the select all checkbox inside the panel's header. + * @defaultValue true + */ + showSelectAll?: boolean | undefined; + /** + * Label to display if showSelectAll is true + */ + selectAllLabel?: string; + /** + * Inline style of the element. + */ + style?: React.CSSProperties | undefined; + /** + * Index of the element in tabbing order. + */ + tabIndex?: number | undefined; + /** + * Content of the tooltip. + */ + tooltip?: string | undefined; + /** + * Configuration of the tooltip, refer to the tooltip documentation for more information. + */ + tooltipOptions?: TooltipOptions | undefined; + /** + * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. + */ + transitionOptions?: CSSTransitionProps | undefined; + /** + * Whether the option should be used as the value for the select element. + */ + useOptionAsValue?: boolean | undefined; + /** + * Value of the component. + */ + value?: any | undefined; + /** + * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. + */ + virtualScrollerOptions?: VirtualScrollerProps; + /** + * Callback to invoke when the element loses focus. + * @param {React.FocusEvent} event - Browser event. + */ + onBlur?(event: React.FocusEvent): void; + /** + * Callback to invoke when value changes. + * @param {MultiSelectChangeEvent} event - Custom change event. + */ + onChange?(event: MultiSelectChangeEvent): void; + /** + * Callback to invoke on filtering. + * @param {MultiSelectFilterEvent} event - Custom filter event. + */ + onFilter?(event: MultiSelectFilterEvent): void; + /** + * Callback to invoke when the element receives focus. + * @param {React.FocusEvent} event - Browser event. + */ + onFocus?(event: React.FocusEvent): void; + /** + * Callback to invoke when overlay panel becomes hidden. + */ + onHide?(): void; + /** + * Callback to invoke when a chip is removed. + * @param {MultiSelectRemoveEvent} event - Custom remove event + */ + onRemove?(event: MultiSelectRemoveEvent): void; + /** + * Callback to invoke when all data is selected. + * @param {MultiSelectAllEvent} event - Custom select event. + */ + onSelectAll?(event: MultiSelectAllEvent): void; + /** + * Callback to invoke when overlay panel becomes visible. + */ + onShow?(): void; +} + +/** + * **PrimeReact - MultiSelect** + * + * _MultiSelect is used to select multiple items from a collection._ + * + * [Live Demo](https://www.primereact.org/multiselect/) + * --- --- + * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png) + * + * @group Component + */ +export declare class MultiSelect extends React.Component { + /** + * Used to show the overlay. + */ + public show(): void; + /** + * Used to hide the overlay. + */ + public hide(): void; + /** + * Used to focus the component. + */ + public focus(): void; + /** + * Used to get container element. + * @return {HTMLDivElement} Container element + */ + public getElement(): HTMLDivElement; + /** + * Used to get input element. + * @return {HTMLInputElement} Input element + */ + public getInput(): HTMLInputElement; + /** + * Used to get overlay element. + * @return {HTMLElement} Overlay element + */ + public getOverlay(): HTMLElement; +} diff --git a/components/lib/progressbar/primereact.code-workspace b/components/lib/progressbar/primereact.code-workspace new file mode 100644 index 0000000000..84e68f324f --- /dev/null +++ b/components/lib/progressbar/primereact.code-workspace @@ -0,0 +1,30 @@ +{ + "folders": [ + { + "name": "primereact", + "path": "../../../../GitHub/primereact" + } + ], + "settings": { + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#007eff", + "activityBar.background": "#007eff", + "activityBar.foreground": "#e7e7e7", + "activityBar.inactiveForeground": "#e7e7e799", + "activityBarBadge.background": "#ff9fcf", + "activityBarBadge.foreground": "#15202b", + "commandCenter.border": "#e7e7e799", + "sash.hoverBorder": "#007eff", + "statusBar.background": "#0065cc", + "statusBar.foreground": "#e7e7e7", + "statusBarItem.hoverBackground": "#007eff", + "statusBarItem.remoteBackground": "#0065cc", + "statusBarItem.remoteForeground": "#e7e7e7", + "titleBar.activeBackground": "#0065cc", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#0065cc99", + "titleBar.inactiveForeground": "#e7e7e799" + }, + "peacock.color": "#0065cc" + } +} diff --git a/pages/metergroup/index.js b/pages/metergroup/index.js new file mode 100644 index 0000000000..294637f6b8 --- /dev/null +++ b/pages/metergroup/index.js @@ -0,0 +1,17 @@ +import DocApiTable from '@/components/doc/common/docapitable'; +import { DocComponent } from '@/components/doc/common/doccomponent'; +import { BasicDoc } from '@/components/doc/metergroup/basicdoc'; + +const MessagesDemo = () => { + const docs = [ + { + id: 'basic', + label: 'Basic', + component: BasicDoc + } + ]; + + return ; +}; + +export default MessagesDemo; diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 915ffc15b7..2f7c45e64b 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #93cbf9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #64b5f6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #64b5f6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 41043c2f93..3f964565d2 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #a7d8a9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81c784; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #81c784; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index a93f549484..a818541157 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #ffe284; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffd54f; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffd54f; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 3594a56607..97256bfda4 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } .p-datepicker { padding: 0; background: #2a323d; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #e3f3fe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #3f4b5b; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -5962,6 +5965,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-metergroup .p-metergroup-meter-container { + background: #3f4b5b; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #8dd0ff; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #8dd0ff; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 1734755b41..faf3100450 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; + } .p-datepicker { padding: 0; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dee2e6; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #efefef; color: #212529; @@ -5962,6 +5965,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-metergroup .p-metergroup-meter-container { + background: #e9ecef; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007bff; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007bff; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index e4c57408c6..f42c25da66 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } .p-datepicker { padding: 0.75rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: inset 0 0 0 1px #605e5c; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f3f2f1; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #323130; @@ -5904,6 +5907,64 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-metergroup .p-metergroup-meter-container { + background: #edebe9; + border-radius: 2px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #0078d4; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 2px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #0078d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 2px; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 380daaf33d..1dcaf2d7d1 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #fbbf24; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #fbbf24; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index b5e128d188..a9163fb5d6 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #60a5fa; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #60a5fa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 7e7ab819fb..e4cce90cb3 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #22d3ee; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #22d3ee; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 78f7054a85..c574254896 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #34d399; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #34d399; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index fd504bc895..26bfc0bfb3 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #818cf8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #818cf8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 27624fad01..03ba5a0b65 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f472b6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #f472b6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 0d4eb344e6..251bf4478b 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #2dd4bf; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #2dd4bf; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 097e174cee..e0a3eab31c 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #fef08a; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f59e0b; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #f59e0b; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index b7bea218d3..2d9b47c9d1 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + border-color: #3b82f6; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #bfdbfe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3b82f6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #3b82f6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 6aadf0196f..7a4d57fedf 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #06b6d4; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #06b6d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 6c75aed430..1e4c5042ea 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #10b981; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #10b981; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index ad78b81e32..240367c5f8 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + border-color: #6366f1; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #c7d2fe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #6366f1; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #6366f1; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index cb52e7740d..2e10e67cab 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ec4899; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ec4899; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index d35bafba94..3beaa3cad4 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2882,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; @@ -5921,6 +5924,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #14b8a6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #14b8a6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index ed0dab4c1d..c048948bcf 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #ffe082; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -5913,6 +5916,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffe082; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffe082; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 5738b01b6c..5d61c08e9f 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81d4fa; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -5913,6 +5916,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81d4fa; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #81d4fa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 52e13fa24f..88917dedf8 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #c5e1a5; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -5913,6 +5916,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #c5e1a5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #c5e1a5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index e9369266dd..38b697aafb 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #f48fb1; + } .p-datepicker { padding: 0.857rem; background: #323232; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.1rem white; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #4b4b4b; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #323232; color: #dedede; @@ -5913,6 +5916,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f48fb1; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #f48fb1; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index b3ff001ec2..f3b61b51d3 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2885,10 +2892,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5973,6 +5976,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(159, 168, 218, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9FA8DA; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #9FA8DA; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6905,6 +6966,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 4442441fba..fbd527fb41 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2885,10 +2892,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5973,6 +5976,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(63, 81, 181, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3F51B5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #3F51B5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6905,6 +6966,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index d578f6dba9..00d9a735cd 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2885,10 +2892,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5973,6 +5976,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(159, 168, 218, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9FA8DA; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #9FA8DA; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6905,6 +6966,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index d15d8205fe..f1a92ef63a 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2885,10 +2892,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5973,6 +5976,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(63, 81, 181, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3F51B5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #3F51B5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6905,6 +6966,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index 8d736e5421..edd7eb29c1 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -437,6 +437,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + border-color: #81a1c1; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -645,7 +651,8 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2887,10 +2894,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #ffffff; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #eceff4; color: #4c566a; @@ -5975,6 +5978,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e9f0; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #5e81ac; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #5e81ac; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 1517f9e72e..6297946e72 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; + } .p-datepicker { padding: 0.25rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #90c9f5; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #dde1e6; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f2f4f8; color: #343a3f; @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 1px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #1174c0; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #1174c0; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 1px; + border-top-right-radius: 1px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index f786f090d7..157f054c9e 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; @@ -5904,6 +5907,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 3c1d618ba6..e3fb6291ed 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; @@ -5913,6 +5916,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index a1e3ed24a7..b9949aab28 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #8dcdff; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -2874,10 +2881,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #d8dae2; - border-width: 1px; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #333333; @@ -5913,6 +5916,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index d8d22aa4ba..766c60e810 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7b95a3; + } .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0.25rem; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dadada; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #666666; @@ -5904,6 +5907,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-metergroup .p-metergroup-meter-container { + background: #efefef; + border-radius: 2px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #7b95a3; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #7b95a3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index b49b941381..98045fded0 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196f3; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #2196f3; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #2196f3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index ccf5fe2fbd..c2747e8b6e 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4caf50; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #4caf50; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #4caf50; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 5f67ffed8b..8852a9417c 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #ffc107; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #ffe69c; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffc107; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffc107; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 0cd7b48d62..d5193b81eb 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -434,6 +434,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; + } .p-datepicker { padding: 0.5rem; background: #282936; @@ -642,7 +648,8 @@ box-shadow: 0 0 0 1px #e0d8fc; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2884,10 +2891,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #3e4053; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -5923,6 +5926,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-metergroup .p-metergroup-meter-container { + background: #3e4053; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #b19df7; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #b19df7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 5d9cadbaa2..7b0af01ff7 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -434,6 +434,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; + } .p-datepicker { padding: 0.5rem; background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); @@ -642,7 +648,8 @@ box-shadow: 0 0 0 1px #c7bbfa; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2884,10 +2891,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #dfe7ef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #eff3f8; color: #708da9; @@ -5923,6 +5926,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-metergroup .p-metergroup-meter-container { + background: #dfe7ef; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #7254f3; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #7254f3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 4f7853cf4d..4bf4b31c86 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -446,6 +446,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + border-color: #4f46e5; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -654,7 +660,8 @@ box-shadow: 0 0 0 1px #6366f1; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2896,10 +2903,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f4f4f5; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #fafafa; color: #3f3f46; @@ -5984,6 +5987,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 0.375rem; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #4f46e5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #4f46e5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index c1cf3fe476..72645b5831 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #93cbf9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #64b5f6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #64b5f6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index ad2e61e9db..1a64d7b0f2 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #a7d8a9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81c784; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #81c784; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 3d320120a0..24cdee7b0e 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #ffe284; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2865,10 +2872,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -5953,6 +5956,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffd54f; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffd54f; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 3bd06c8314..b0ca6c107b 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -441,6 +441,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; + } .p-datepicker { padding: 0.5rem; background: #161d21; @@ -649,7 +655,8 @@ box-shadow: 0 0 0 1px #9eade6; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2891,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #263238; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -5979,6 +5982,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-metergroup .p-metergroup-meter-container { + background: #263238; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9eade6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #9eade6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index ab8a5d0153..7c7cd2eae5 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -441,6 +441,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -649,7 +655,8 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -2891,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #f5f5f5; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: #6c6c6c; @@ -5979,6 +5982,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-metergroup .p-metergroup-meter-container { + background: #ebebeb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #5472d4; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #5472d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; From b0b72586aac9be07eeb74898cffb94f9e4a24710 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Wed, 7 Feb 2024 03:05:30 +0300 Subject: [PATCH 03/31] Demo pages added --- components/doc/metergroup/basicdoc.js | 41 +++++----------- components/doc/metergroup/icondoc.js | 58 ++++++++++++++++++++++ components/doc/metergroup/importdoc.js | 17 +++++++ components/doc/metergroup/labeldoc.js | 61 ++++++++++++++++++++++++ components/doc/metergroup/minmaxdoc.js | 60 +++++++++++++++++++++++ components/doc/metergroup/multipledoc.js | 58 ++++++++++++++++++++++ components/doc/metergroup/verticaldoc.js | 60 +++++++++++++++++++++++ pages/metergroup/index.js | 38 ++++++++++++++- 8 files changed, 362 insertions(+), 31 deletions(-) create mode 100644 components/doc/metergroup/icondoc.js create mode 100644 components/doc/metergroup/importdoc.js create mode 100644 components/doc/metergroup/labeldoc.js create mode 100644 components/doc/metergroup/minmaxdoc.js create mode 100644 components/doc/metergroup/multipledoc.js create mode 100644 components/doc/metergroup/verticaldoc.js diff --git a/components/doc/metergroup/basicdoc.js b/components/doc/metergroup/basicdoc.js index 0b01c34249..c6052ad59a 100644 --- a/components/doc/metergroup/basicdoc.js +++ b/components/doc/metergroup/basicdoc.js @@ -5,68 +5,49 @@ import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; export function BasicDoc(props) { const code = { basic: ` - + `, javascript: ` import React, { useEffect, useRef } from 'react'; -import { useMountEffect } from 'primereact/hooks'; -import { Messages } from 'primereact/messages'; +import { MeterGroup } from 'primereact/metergroup'; export default function BasicDemo() { - const msgs = useRef(null); - - useMountEffect(() => { - if (msgs.current) { - msgs.current.clear(); - msgs.current.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }); - } - }); + const values = [{ label: 'Space used', value: 15 }]; return (
    - +
    ) } `, typescript: ` import React, { useEffect, useRef } from 'react'; -import { useMountEffect } from 'primereact/hooks'; -import { Messages } from 'primereact/messages'; +import { MeterGroup } from 'primereact/metergroup'; export default function BasicDemo() { - const msgs = useRef(null); - - useMountEffect(() => { - msgs.current?.clear(); - msgs.current?.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }); - }); + const values = [{ label: 'Space used', value: 15 }]; return (
    - +
    ) } ` }; - const values = [ - { color: '#239EF0', label: 'Mortgage', value: 25, icon: 'pi pi-cog' }, - { color: '#FAA419', label: 'Loan', value: 15 }, - { color: '#EE5879', label: 'Credit Card', value: 20 } - ]; + const values = [{ label: 'Space used', value: 15 }]; return ( <>

    - Messages are displayed by calling the show method provided by the component ref. A single message is specified by the Message interface that defines various properties such as severity, summary and{' '} - detail + MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem.

    -
    - +
    +
    diff --git a/components/doc/metergroup/icondoc.js b/components/doc/metergroup/icondoc.js new file mode 100644 index 0000000000..b75d2dee29 --- /dev/null +++ b/components/doc/metergroup/icondoc.js @@ -0,0 +1,58 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; + +export function IconDoc(props) { + const code = { + basic: ` + + `, + javascript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function IconDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function IconDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + ` + }; + + const values = [ + { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' }, + { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' }, + { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, + { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } + ]; + + return ( + <> + +

    Icons can be displayed next to the labels instead of the default marker.

    +     +
    + +
    + + + ); +} diff --git a/components/doc/metergroup/importdoc.js b/components/doc/metergroup/importdoc.js new file mode 100644 index 0000000000..56bae31fe2 --- /dev/null +++ b/components/doc/metergroup/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { MeterGroup } from 'primereact/metergroup'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/metergroup/labeldoc.js b/components/doc/metergroup/labeldoc.js new file mode 100644 index 0000000000..194a922bd6 --- /dev/null +++ b/components/doc/metergroup/labeldoc.js @@ -0,0 +1,61 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; + +export function LabelDoc(props) { + const code = { + basic: ` + + `, + javascript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function LabelDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function LabelDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + ` + }; + + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; + + return ( + <> + +

    + The position of the labels relative to the meters is defined using the labelPosition property. The default orientation of the labels is horizontal, and the vertical alternative is available through the{' '} + labelOrientation option. +

    +     +
    + +
    + + + ); +} diff --git a/components/doc/metergroup/minmaxdoc.js b/components/doc/metergroup/minmaxdoc.js new file mode 100644 index 0000000000..48f47c68a4 --- /dev/null +++ b/components/doc/metergroup/minmaxdoc.js @@ -0,0 +1,60 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; + +export function MinMaxDoc(props) { + const code = { + basic: ` + + `, + javascript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function MinMaxDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function MinMaxDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + ` + }; + + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; + + return ( + <> + +

    + Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively. +

    +     +
    + +
    + + + ); +} diff --git a/components/doc/metergroup/multipledoc.js b/components/doc/metergroup/multipledoc.js new file mode 100644 index 0000000000..f5221a3004 --- /dev/null +++ b/components/doc/metergroup/multipledoc.js @@ -0,0 +1,58 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; + +export function MultipleDoc(props) { + const code = { + basic: ` + + `, + javascript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function MultipleDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function MultipleDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + ` + }; + + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; + + return ( + <> + +

    Adding more items to the array displays the meters in a group.

    +     +
    + +
    + + + ); +} diff --git a/components/doc/metergroup/verticaldoc.js b/components/doc/metergroup/verticaldoc.js new file mode 100644 index 0000000000..a6bc2fef11 --- /dev/null +++ b/components/doc/metergroup/verticaldoc.js @@ -0,0 +1,60 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; + +export function VerticalDoc(props) { + const code = { + basic: ` + + `, + javascript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function VerticalDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function VerticalDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + ` + }; + + const values = [ + { label: 'Apps', color: '#34d399', value: 24 }, + { label: 'Messages', color: '#fbbf24', value: 16 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 12 } + ]; + + return ( + <> + +

    + MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem. +

    +     +
    + +
    + + + ); +} diff --git a/pages/metergroup/index.js b/pages/metergroup/index.js index 294637f6b8..632655b1fc 100644 --- a/pages/metergroup/index.js +++ b/pages/metergroup/index.js @@ -1,17 +1,53 @@ import DocApiTable from '@/components/doc/common/docapitable'; import { DocComponent } from '@/components/doc/common/doccomponent'; import { BasicDoc } from '@/components/doc/metergroup/basicdoc'; +import { IconDoc } from '@/components/doc/metergroup/icondoc'; +import { ImportDoc } from '@/components/doc/metergroup/importdoc'; +import { MultipleDoc } from '@/components/doc/metergroup/multipledoc'; +import { LabelDoc } from '@/components/doc/metergroup/labeldoc'; +import { VerticalDoc } from '@/components/doc/metergroup/verticaldoc'; +import { MinMaxDoc } from '@/components/doc/metergroup/minmaxdoc'; const MessagesDemo = () => { const docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, { id: 'basic', label: 'Basic', component: BasicDoc + }, + { + id: 'multiple', + label: 'Multiple', + component: MultipleDoc + }, + { + id: 'icon', + label: 'Icon', + component: IconDoc + }, + { + id: 'label', + label: 'Label', + component: LabelDoc + }, + { + id: 'vertical', + label: 'Vertical', + component: VerticalDoc + }, + { + id: 'min-max', + label: 'Min-Max', + component: MinMaxDoc } ]; - return ; + return ; }; export default MessagesDemo; From aa40c767906158f25493e28c33dd2e41e7a47370 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 9 Feb 2024 05:39:27 +0300 Subject: [PATCH 04/31] MeterGroup Templating Added --- components/doc/metergroup/templatedoc.js | 94 +++++++++++++++++++++ components/doc/metergroup/verticaldoc.js | 2 +- components/lib/metergroup/MeterGroup.js | 36 ++++++-- components/lib/metergroup/MeterGroupBase.js | 28 ++---- pages/metergroup/index.js | 6 ++ 5 files changed, 140 insertions(+), 26 deletions(-) create mode 100644 components/doc/metergroup/templatedoc.js diff --git a/components/doc/metergroup/templatedoc.js b/components/doc/metergroup/templatedoc.js new file mode 100644 index 0000000000..98ba7e1c77 --- /dev/null +++ b/components/doc/metergroup/templatedoc.js @@ -0,0 +1,94 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; +import { Button } from '@/components/lib/button/Button'; +import { Card } from '@/components/lib/card/Card'; + +export function TemplateDoc(props) { + const code = { + basic: ` + + `, + javascript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function TemplateDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function TemplateDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
    + +
    + ) +} + ` + }; + + const meterRenderer = (props, attr) => + + const labelListRenderer = ({values}) =>
    + + {values.map((item, index) => ( +
    +
    + { item.label} + { item.value }% +
    + + + +
    +     ))} +
    + + const values = [ + { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, + { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, + { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, + { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meterRenderer } + ]; + + const start = ({totalPercent}) =>
    + Storage + {totalPercent}% + 1TB +
    + + const end =
    +
    + + + + return ( + <> + +

    + MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem. +

    +     +
    + +
    + + + ); +} + + diff --git a/components/doc/metergroup/verticaldoc.js b/components/doc/metergroup/verticaldoc.js index a6bc2fef11..93249cdcc7 100644 --- a/components/doc/metergroup/verticaldoc.js +++ b/components/doc/metergroup/verticaldoc.js @@ -52,7 +52,7 @@ export default function VerticalDemo() {

    - +
    diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js index b6acba3d39..7e1ea01ff1 100644 --- a/components/lib/metergroup/MeterGroup.js +++ b/components/lib/metergroup/MeterGroup.js @@ -8,7 +8,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase'; export const MeterGroup = (inProps) => { const context = useContext(PrimeReactContext); const props = MeterGroupBase.getProps(inProps, context); - const { values, min, max, orientation, labelPosition } = props; + const { values, min, max, orientation, labelPosition, start, end, meterRenderer, labelListRenderer } = props; const mergeProps = useMergeProps(); const { ptm, cx, isUnstyled } = MeterGroupBase.setMetaData({ @@ -22,6 +22,9 @@ export const MeterGroup = (inProps) => { useHandleStyle(MeterGroupBase.css.styles, isUnstyled, { name: 'progressbar' }); const totalPercent = values.reduce((acc, val) => acc + val.value, 0); + const precentages = values.map((item) => { + return Math.round((item.value / totalPercent) * 100); + }); const calculatePercentage = (meter = 0) => { const percentageOfItem = ((meter - min) / (max - min)) * 100; @@ -41,8 +44,8 @@ export const MeterGroup = (inProps) => { const meters = values.map((item, index) => { const meterInlineStyles = { backgroundColor: item.color, - width: orientation === 'horizontal' && calculatePercentage(item.value) + '%', - height: orientation === 'vertical' && calculatePercentage(item.value) + '%' + width: orientation === 'horizontal' ? calculatePercentage(item.value) + '%' : 'auto', + height: orientation === 'vertical' ? calculatePercentage(item.value) + '%' : 'auto' }; const meterProps = mergeProps( @@ -53,7 +56,20 @@ export const MeterGroup = (inProps) => { ptm('meter') ); - return ; + if (meterRenderer || item.meterTemplate) { + const meterTemplateProps = mergeProps( + { + className: cx('meter') + }, + ptm('meter') + ) + + return ObjectUtils.getJSXElement(item.meterTemplate || meterRenderer, { ...item, percentage: calculatePercentage(item.value), index, }, meterTemplateProps); + } + + else { + return + } }); const meterContainerProps = mergeProps( @@ -122,11 +138,19 @@ export const MeterGroup = (inProps) => { ); }; + const templateProps = { + totalPercent, + precentages, + values + }; + return (
    - {labelPosition === 'start' && createLabelList()} + {labelPosition === 'start' && ObjectUtils.getJSXElement(labelListRenderer || createLabelList, {values, totalPercent}) } + {start && ObjectUtils.getJSXElement(start, templateProps)} {createMeters()} - {labelPosition === 'end' && createLabelList()} + {end && ObjectUtils.getJSXElement(end, templateProps)} + {labelPosition === 'end' && ObjectUtils.getJSXElement(labelListRenderer || createLabelList, {values, totalPercent}) }
    ); }; diff --git a/components/lib/metergroup/MeterGroupBase.js b/components/lib/metergroup/MeterGroupBase.js index e60a27ebd0..9aefb0b5b4 100644 --- a/components/lib/metergroup/MeterGroupBase.js +++ b/components/lib/metergroup/MeterGroupBase.js @@ -26,12 +26,11 @@ const classes = { const styles = ` @layer primereact { .p-metergroup { - overflow: hidden; position: relative; + overflow: hidden; } .p-metergroup-vertical.p-metergroup { - height: 100%; display: flex; } @@ -43,10 +42,6 @@ const styles = ` display: flex; } - .p-metergroup-meter { - display: flex; - } - .p-metergroup-label-list { display: flex; margin: 0; @@ -58,23 +53,14 @@ const styles = ` align-items: start; } - .p-metergroup-horizontal .p-metergroup-label-list-vertical { - flex-direction: column; - } - - .p-metergroup-horizontal .p-metergroup-meter { - height: 100%; - } - - .p-metergroup-vertical .p-metergroup-label-list-horizontal { + .p-metergroup-label-list-vertical { flex-direction: column; } - .p-metergroup-vertical .p-metergroup-meter { - width: 100%; + .p-metergroup-label-list-horizontal { + flex-direction: row; } - .p-metergroup-label-list-item { display: inline-flex; align-items: center; @@ -97,7 +83,11 @@ export const MeterGroupBase = ComponentBase.extend({ max: 100, orientation: 'horizontal', labelPosition: 'end', - labelOrientation: 'horizontal' + labelOrientation: 'horizontal', + start: null, + end: null, + meterRenderer: null, + labelListRenderer: null }, css: { classes, diff --git a/pages/metergroup/index.js b/pages/metergroup/index.js index 632655b1fc..72a971a0d8 100644 --- a/pages/metergroup/index.js +++ b/pages/metergroup/index.js @@ -7,6 +7,7 @@ import { MultipleDoc } from '@/components/doc/metergroup/multipledoc'; import { LabelDoc } from '@/components/doc/metergroup/labeldoc'; import { VerticalDoc } from '@/components/doc/metergroup/verticaldoc'; import { MinMaxDoc } from '@/components/doc/metergroup/minmaxdoc'; +import { TemplateDoc } from '@/components/doc/metergroup/templatedoc'; const MessagesDemo = () => { const docs = [ @@ -44,6 +45,11 @@ const MessagesDemo = () => { id: 'min-max', label: 'Min-Max', component: MinMaxDoc + }, + { + id: 'template', + label: 'Template', + component: TemplateDoc } ]; From 3acbc42e20664eca47e03f8347df0b90f8960027 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Wed, 14 Feb 2024 18:25:05 +0300 Subject: [PATCH 05/31] MeterGroup PT options and Apidoc --- components/doc/common/apidoc/index.json | 264 ++++++ components/doc/metergroup/accessibilitydoc.js | 26 + components/doc/metergroup/icondoc.js | 14 +- components/doc/metergroup/labeldoc.js | 20 +- components/doc/metergroup/minmaxdoc.js | 20 +- components/doc/metergroup/multipledoc.js | 14 +- components/doc/metergroup/pt/ptdoc.js | 454 ++++++++++ components/doc/metergroup/pt/wireframe.js | 12 + components/doc/metergroup/templatedoc.js | 201 ++++- .../doc/metergroup/theming/styleddoc.js | 76 ++ .../doc/metergroup/theming/tailwinddoc.js | 145 ++++ components/doc/metergroup/verticaldoc.js | 24 +- components/lib/metergroup/MeterGroup.js | 29 +- components/lib/metergroup/metergroup.d.ts | 778 ++---------------- components/lib/passthrough/tailwind/index.js | 97 +++ pages/metergroup/index.js | 45 +- 16 files changed, 1456 insertions(+), 763 deletions(-) create mode 100644 components/doc/metergroup/accessibilitydoc.js create mode 100644 components/doc/metergroup/pt/ptdoc.js create mode 100644 components/doc/metergroup/pt/wireframe.js create mode 100644 components/doc/metergroup/theming/styleddoc.js create mode 100644 components/doc/metergroup/theming/tailwinddoc.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 99c13b6cf3..919f6db326 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -34496,6 +34496,270 @@ } } }, + "metergroup": { + "description": "MeterGroup displays scalar measurements within a known range.\n\n[Live Demo](https://www.primereact.org/metergroup/)", + "components": { + "MeterGroup": { + "description": "MeterGroup is an extension to standard input element with theming and keyfiltering.", + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + }, + "props": { + "description": "Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component.", + "values": [ + { + "name": "className", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Additional CSS classes to apply to the MeterGroup." + }, + { + "name": "end", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "labelListRenderer", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "labelOrientation", + "optional": true, + "readonly": false, + "type": "\"horizontal\" | \"vertical\"", + "default": "'horizontal'", + "description": "The orientation of the label. Can be either 'horizontal' or 'vertical'." + }, + { + "name": "labelPosition", + "optional": true, + "readonly": false, + "type": "\"end\" | \"start\"", + "default": "'end'", + "description": "The position of the label. Can be either 'start' or 'end'." + }, + { + "name": "max", + "optional": true, + "readonly": false, + "type": "number", + "default": "100", + "description": "The maximum value for the MeterGroup." + }, + { + "name": "meterRenderer", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "min", + "optional": true, + "readonly": false, + "type": "number", + "default": "0", + "description": "The minimum value for the MeterGroup." + }, + { + "name": "orientation", + "optional": true, + "readonly": false, + "type": "\"horizontal\" | \"vertical\"", + "default": "'horizontal'", + "description": "The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'." + }, + { + "name": "start", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "values", + "optional": true, + "readonly": false, + "type": "MeterGroupValue[]", + "default": "", + "description": "An array of values to be represented by the MeterGroup." + } + ] + }, + "callbacks": { + "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.", + "values": [] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "MeterGroupContext": { + "description": "Defines current options in MeterGroup component.", + "relatedProp": "", + "props": [ + { + "name": "disabled", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current disabled state of the component as a boolean." + } + ], + "callbacks": [] + }, + "MeterGroupPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "MeterGroupProps" + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "MeterGroupContext" + } + ], + "callbacks": [] + }, + "MeterGroupPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "MeterGroupProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughType>", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "labellist", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughType>", + "description": "Used to pass attributes to the label list's DOM element." + }, + { + "name": "labellistitem", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughType>", + "description": "Used to pass attributes to the label list item's DOM element." + }, + { + "name": "labellisttype", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughType>", + "description": "Used to pass attributes to the label list type's DOM element." + }, + { + "name": "label", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughType>", + "description": "Used to pass attributes to the label's DOM element." + }, + { + "name": "metercontainer", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughType>", + "description": "Used to pass attributes to the meter container's DOM element." + }, + { + "name": "meter", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughType>", + "description": "Used to pass attributes to the meter's DOM element." + } + ], + "callbacks": [] + }, + "MeterGroupValue": { + "relatedProp": "", + "props": [ + { + "name": "value", + "optional": true, + "readonly": false, + "type": "number" + }, + { + "name": "label", + "optional": true, + "readonly": false, + "type": "string | HTMLElement" + }, + { + "name": "color", + "optional": true, + "readonly": false, + "type": "string" + }, + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "callbacks": [] + }, + "CustomRenderProps": { + "relatedProp": "", + "props": [ + { + "name": "totaLPercent", + "optional": false, + "readonly": false, + "type": "number" + }, + { + "name": "percentages", + "optional": false, + "readonly": false, + "type": "number[]" + }, + { + "name": "values", + "optional": false, + "readonly": false, + "type": "MeterGroupValue[]" + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "MeterGroupPassThroughType": { + "values": "PassThroughType" + }, + "MeterGroupPassThroughTransitionType": { + "values": "ReactCSSTransitionProps | Function | undefined" + } + } + } + }, "multiselect": { "description": "MultiSelect is used to select multiple items from a collection.\n\n[Live Demo](https://www.primereact.org/multiselect/)", "components": { diff --git a/components/doc/metergroup/accessibilitydoc.js b/components/doc/metergroup/accessibilitydoc.js new file mode 100644 index 0000000000..6c1478a1e2 --- /dev/null +++ b/components/doc/metergroup/accessibilitydoc.js @@ -0,0 +1,26 @@ +import { DevelopmentSection } from '@/components/doc/common/developmentsection'; +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function AccessibilityDoc() { + const code = { + basic: ` +Options + + + + ` + }; + + return ( + +

    Screen Reader

    +

    + MeterGroup component uses meter role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby prop. +

    +

    Keyboard Support

    +

    Component does not include any interactive elements.

    +     + ); +} diff --git a/components/doc/metergroup/icondoc.js b/components/doc/metergroup/icondoc.js index b75d2dee29..6c854c3698 100644 --- a/components/doc/metergroup/icondoc.js +++ b/components/doc/metergroup/icondoc.js @@ -12,7 +12,12 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function IconDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' }, + { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' }, + { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, + { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } + ]; return (
    @@ -26,7 +31,12 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function IconDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' }, + { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' }, + { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, + { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } + ]; return (
    diff --git a/components/doc/metergroup/labeldoc.js b/components/doc/metergroup/labeldoc.js index 194a922bd6..74897fb8da 100644 --- a/components/doc/metergroup/labeldoc.js +++ b/components/doc/metergroup/labeldoc.js @@ -5,18 +5,23 @@ import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; export function LabelDoc(props) { const code = { basic: ` - + `, javascript: ` import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function LabelDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; return (
    - +
    ) } @@ -26,11 +31,16 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function LabelDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; return (
    - +
    ) } diff --git a/components/doc/metergroup/minmaxdoc.js b/components/doc/metergroup/minmaxdoc.js index 48f47c68a4..8bb78ce7e1 100644 --- a/components/doc/metergroup/minmaxdoc.js +++ b/components/doc/metergroup/minmaxdoc.js @@ -5,18 +5,23 @@ import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; export function MinMaxDoc(props) { const code = { basic: ` - + `, javascript: ` import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function MinMaxDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; return (
    - +
    ) } @@ -26,11 +31,16 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function MinMaxDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; return (
    - +
    ) } diff --git a/components/doc/metergroup/multipledoc.js b/components/doc/metergroup/multipledoc.js index f5221a3004..580a13540a 100644 --- a/components/doc/metergroup/multipledoc.js +++ b/components/doc/metergroup/multipledoc.js @@ -12,7 +12,12 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function MultipleDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; return (
    @@ -26,7 +31,12 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function MultipleDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; return (
    diff --git a/components/doc/metergroup/pt/ptdoc.js b/components/doc/metergroup/pt/ptdoc.js new file mode 100644 index 0000000000..69c8a26d96 --- /dev/null +++ b/components/doc/metergroup/pt/ptdoc.js @@ -0,0 +1,454 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { Menubar } from '@/components/lib/menubar/Menubar'; + +export function PTDoc(props) { + const items = [ + { + label: 'File', + icon: 'pi pi-fw pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-plus', + items: [ + { + label: 'Bookmark', + icon: 'pi pi-fw pi-bookmark' + }, + { + label: 'Video', + icon: 'pi pi-fw pi-video' + } + ] + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-trash' + }, + { + separator: true + }, + { + label: 'Export', + icon: 'pi pi-fw pi-external-link' + } + ] + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Left', + icon: 'pi pi-fw pi-align-left' + }, + { + label: 'Right', + icon: 'pi pi-fw pi-align-right' + }, + { + label: 'Center', + icon: 'pi pi-fw pi-align-center' + }, + { + label: 'Justify', + icon: 'pi pi-fw pi-align-justify' + } + ] + }, + { + label: 'Users', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-user-plus' + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-user-minus' + }, + { + label: 'Search', + icon: 'pi pi-fw pi-users', + items: [ + { + label: 'Filter', + icon: 'pi pi-fw pi-filter', + items: [ + { + label: 'Print', + icon: 'pi pi-fw pi-print' + } + ] + }, + { + icon: 'pi pi-fw pi-bars', + label: 'List' + } + ] + } + ] + }, + { + label: 'Events', + icon: 'pi pi-fw pi-calendar', + items: [ + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Save', + icon: 'pi pi-fw pi-calendar-plus' + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label: 'Archive', + icon: 'pi pi-fw pi-calendar-times', + items: [ + { + label: 'Remove', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-power-off' + } + ]; + + const code = { + basic: ` + ({ + className: context.active ? 'bg-primary-200 border-round-sm' : undefined + }) + }} +/> +`, + javascript: ` +import React from 'react'; +import { Menubar } from 'primereact/menubar'; + +export default function PTDemo() { + const items = [ + { + label: 'File', + icon: 'pi pi-fw pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-plus', + items: [ + { + label: 'Bookmark', + icon: 'pi pi-fw pi-bookmark' + }, + { + label: 'Video', + icon: 'pi pi-fw pi-video' + }, + + ] + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-trash' + }, + { + separator: true + }, + { + label: 'Export', + icon: 'pi pi-fw pi-external-link' + } + ] + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Left', + icon: 'pi pi-fw pi-align-left' + }, + { + label: 'Right', + icon: 'pi pi-fw pi-align-right' + }, + { + label: 'Center', + icon: 'pi pi-fw pi-align-center' + }, + { + label: 'Justify', + icon: 'pi pi-fw pi-align-justify' + }, + + ] + }, + { + label: 'Users', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-user-plus', + + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-user-minus', + + }, + { + label: 'Search', + icon: 'pi pi-fw pi-users', + items: [ + { + label: 'Filter', + icon: 'pi pi-fw pi-filter', + items: [ + { + label: 'Print', + icon: 'pi pi-fw pi-print' + } + ] + }, + { + icon: 'pi pi-fw pi-bars', + label: 'List' + } + ] + } + ] + }, + { + label: 'Events', + icon: 'pi pi-fw pi-calendar', + items: [ + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Save', + icon: 'pi pi-fw pi-calendar-plus' + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label: 'Archive', + icon: 'pi pi-fw pi-calendar-times', + items: [ + { + label: 'Remove', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-power-off' + } + ]; + + return ( +
    + ({ + className: context.active ? 'bg-primary-200 border-round-sm' : undefined + }) + }} + /> +
    + ) +} + `, + typescript: ` +import React from 'react'; +import { Menubar } from 'primereact/menubar'; +import { MenuItem } from 'primereact/menuitem'; + +export default function PTDemo() { + const items: MenuItem[] = [ + { + label: 'File', + icon: 'pi pi-fw pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-plus', + items: [ + { + label: 'Bookmark', + icon: 'pi pi-fw pi-bookmark' + }, + { + label: 'Video', + icon: 'pi pi-fw pi-video' + }, + + ] + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-trash' + }, + { + separator: true + }, + { + label: 'Export', + icon: 'pi pi-fw pi-external-link' + } + ] + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Left', + icon: 'pi pi-fw pi-align-left' + }, + { + label: 'Right', + icon: 'pi pi-fw pi-align-right' + }, + { + label: 'Center', + icon: 'pi pi-fw pi-align-center' + }, + { + label: 'Justify', + icon: 'pi pi-fw pi-align-justify' + }, + + ] + }, + { + label: 'Users', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-user-plus', + + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-user-minus', + + }, + { + label: 'Search', + icon: 'pi pi-fw pi-users', + items: [ + { + label: 'Filter', + icon: 'pi pi-fw pi-filter', + items: [ + { + label: 'Print', + icon: 'pi pi-fw pi-print' + } + ] + }, + { + icon: 'pi pi-fw pi-bars', + label: 'List' + } + ] + } + ] + }, + { + label: 'Events', + icon: 'pi pi-fw pi-calendar', + items: [ + { + label: 'Edit', + icon: 'pi pi-fw pi-pencil', + items: [ + { + label: 'Save', + icon: 'pi pi-fw pi-calendar-plus' + }, + { + label: 'Delete', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label: 'Archive', + icon: 'pi pi-fw pi-calendar-times', + items: [ + { + label: 'Remove', + icon: 'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-power-off' + } + ]; + + return ( +
    + ({ + className: context.active ? 'bg-primary-200 border-round-sm' : undefined + }) + }} + /> +
    + ) +} + ` + }; + + return ( + <> + +
    + ({ + className: context.active ? 'bg-primary-200 border-round-sm' : undefined + }) + }} + /> +
    + + + ); +} diff --git a/components/doc/metergroup/pt/wireframe.js b/components/doc/metergroup/pt/wireframe.js new file mode 100644 index 0000000000..f333ee14e7 --- /dev/null +++ b/components/doc/metergroup/pt/wireframe.js @@ -0,0 +1,12 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export const Wireframe = (props) => { + return ( + <> + +
    + menubar +
    + + ); +}; diff --git a/components/doc/metergroup/templatedoc.js b/components/doc/metergroup/templatedoc.js index 98ba7e1c77..814dd9dc8c 100644 --- a/components/doc/metergroup/templatedoc.js +++ b/components/doc/metergroup/templatedoc.js @@ -14,11 +14,53 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function TemplateDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const meterRenderer = (props, attr) => ; + + const labelListRenderer = ({ values }) => ( +
    + {values.map((item, index) => ( + +
    +
    + {item.label} + {item.value}% +
    + + + +
    +     + ))} +
    + ); + + const start = ({ totalPercent }) => ( +
    + Storage + + {totalPercent}% + + 1TB +
    + ); + + const end = ( +
    +
    + ); + + const values = [ + { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, + { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, + { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, + { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meterRenderer } + ]; return (
    - +
    ) } @@ -28,54 +70,147 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function TemplateDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const meterRenderer = (props: any, attr: any) => ( + + ); + + const start = ({ totalPercent }: {totalPercent: number}) => ( +
    + Storage + + {totalPercent}% + + 1TB +
    + ); + + const end = ( +
    +
    + ); + const labelListRenderer = ({ values }: {values: any[]}) => ( +
    + {values.map((item, index) => ( + +
    +
    + {item.label} + {item.value}% +
    + + + +
    +     + ))} +
    + ); + + const values = [ + { + label: 'Apps', + color1: '#34d399', + color2: '#fbbf24', + value: 25, + icon: 'pi pi-table', + }, + { + label: 'Messages', + color1: '#fbbf24', + color2: '#60a5fa', + value: 15, + icon: 'pi pi-inbox', + }, + { + label: 'Media', + color1: '#60a5fa', + color2: '#c084fc', + value: 20, + icon: 'pi pi-image', + }, + { + label: 'System', + color1: '#c084fc', + color2: '#c084fc', + value: 10, + icon: 'pi pi-cog', + meterTemplate: meterRenderer, + }, + ]; + return (
    - +
    ) } ` }; - const meterRenderer = (props, attr) => - - const labelListRenderer = ({values}) =>
    + const meterRenderer = (props, attr) => ; - {values.map((item, index) => ( -
    -
    - { item.label} - { item.value }% + const labelListRenderer = ({ values }) => ( +
    + {values.map((item, index) => ( + +
    +
    + {item.label} + {item.value}% +
    + + +
    - - - -
    - ))} -
    + + ))} +
    + ); + + const start = ({ totalPercent }) => ( +
    + Storage + + {totalPercent}% + + 1TB +
    + ); + + const end = ( +
    +
    + ); - const values = [ + const values = [ { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meterRenderer } ]; - const start = ({totalPercent}) =>
    - Storage - {totalPercent}% - 1TB -
    - - const end =
    -
    - - - return ( <> @@ -84,7 +219,7 @@ export default function TemplateDemo() {

    - +
    diff --git a/components/doc/metergroup/theming/styleddoc.js b/components/doc/metergroup/theming/styleddoc.js new file mode 100644 index 0000000000..8d1a458f7f --- /dev/null +++ b/components/doc/metergroup/theming/styleddoc.js @@ -0,0 +1,76 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function StyledDoc() { + return ( + <> + +

    List of class names used in the styled mode.

    +     +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameElement
    p-metergroupContainer element.
    p-metergroup-horizontalContainer element when orientation mode is horizontal.
    p-metergroup-verticalContainer element when orientation mode is vertical.
    p-metergroup-meter-containerContainer of the meters.
    p-metergroup-meterContent of a meter.
    p-metergroup-label-listContainer element of the list of labels.
    p-metergroup-label-list-startContainer element when label position is start.
    p-metergroup-label-list-endContainer element when label position is end.
    p-metergroup-label-list-horizontalContainer element when label orientation is horizontal.
    p-metergroup-label-list-verticalContainer element when label orientation is vertical.
    p-metergroup-label-list-itemContainer element of a list item.
    p-metergroup-label-list-typeContainer element of a list type.
    p-metergroup-labelContent of a label.
    +
    + + ); +} diff --git a/components/doc/metergroup/theming/tailwinddoc.js b/components/doc/metergroup/theming/tailwinddoc.js new file mode 100644 index 0000000000..0b6acf21f0 --- /dev/null +++ b/components/doc/metergroup/theming/tailwinddoc.js @@ -0,0 +1,145 @@ +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 = { + metergroup: { + root: ({ props }) => ({ + class: [ + // Flexbox + 'flex gap-4', + + { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' } + ] + }), + metercontainer: ({ props }) => ({ + class: [ + // Flexbox + 'flex', + + { 'flex-col': props.orientation === 'vertical' }, + + // Sizing + { 'w-2 h-full': props.orientation === 'vertical' }, + { 'h-2': props.orientation === 'horizontal' }, + + // Colors + 'bg-gray-200 dark:bg-gray-700', + + // Border Radius + 'rounded-lg' + ] + }), + meter: ({ props }) => ({ + class: [ + // Shape + 'border-0', + + // Rounded Corners - Horizontal + { + 'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal' + }, + + // Rounded Corners - Vertical + { + 'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical' + }, + + // Colors + 'bg-primary-500 dark:bg-primary-400' + ] + }), + labellist: ({ props }) => ({ + class: [ + // Display & Flexbox + 'flex flex-wrap', + + { 'gap-4': props.labelOrientation === 'horizontal' }, + + { 'gap-2': props.labelOrientation === 'vertical' }, + + { 'flex-col': props.labelOrientation === 'vertical' }, + + // Conditional Alignment - Horizontal + { + 'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end', + 'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start' + }, + + // Conditional Alignment - Vertical + { + 'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end', + 'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start' + }, + + // List Styling + 'm-0 p-0 list-none' + ] + }), + labellistitem: { + class: [ + // Flexbox + 'inline-flex', + 'items-center', + 'gap-2' + ] + }, + labellisttype: { + class: [ + // Display + 'inline-flex', + + // Background Color + 'bg-primary-500 dark:bg-primary-400', + + // Size + 'w-2 h-2', + + // Rounded Shape + 'rounded-full' + ] + } + } +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { MeterGroup } from 'primereact/MeterGroup'; + +export default function UnstyledDemo() { + const values = [ + { value: 20, color: '#FFC107' }, + { value: 40, color: '#007BE5' }, + { value: 10, color: '#E91E63' }, + { value: 30, color: '#4CAF50' } + ]; + + + 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/doc/metergroup/verticaldoc.js b/components/doc/metergroup/verticaldoc.js index 93249cdcc7..13c2578acc 100644 --- a/components/doc/metergroup/verticaldoc.js +++ b/components/doc/metergroup/verticaldoc.js @@ -5,18 +5,23 @@ import { MeterGroup } from '@/components/lib/metergroup/MeterGroup'; export function VerticalDoc(props) { const code = { basic: ` - + `, javascript: ` import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function VerticalDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 24 }, + { label: 'Messages', color: '#fbbf24', value: 16 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 12 } + ]; return ( -
    - +
    +
    ) } @@ -26,11 +31,16 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function VerticalDemo() { - const values = [{ label: 'Space used', value: 15 }]; + const values = [ + { label: 'Apps', color: '#34d399', value: 24 }, + { label: 'Messages', color: '#fbbf24', value: 16 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 12 } + ]; return ( -
    - +
    +
    ) } diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js index 7e1ea01ff1..3d52fe68f6 100644 --- a/components/lib/metergroup/MeterGroup.js +++ b/components/lib/metergroup/MeterGroup.js @@ -21,9 +21,12 @@ export const MeterGroup = (inProps) => { useHandleStyle(MeterGroupBase.css.styles, isUnstyled, { name: 'progressbar' }); - const totalPercent = values.reduce((acc, val) => acc + val.value, 0); - const precentages = values.map((item) => { - return Math.round((item.value / totalPercent) * 100); + let totalPercent = 0; + let precentages = []; + + values.map((item) => { + totalPercent += item.value; + precentages.push(Math.round((item.value / totalPercent) * 100)); }); const calculatePercentage = (meter = 0) => { @@ -62,13 +65,11 @@ export const MeterGroup = (inProps) => { className: cx('meter') }, ptm('meter') - ) + ); - return ObjectUtils.getJSXElement(item.meterTemplate || meterRenderer, { ...item, percentage: calculatePercentage(item.value), index, }, meterTemplateProps); - } - - else { - return + return ObjectUtils.getJSXElement(item.meterTemplate || meterRenderer, { ...item, percentage: calculatePercentage(item.value), index }, meterTemplateProps); + } else { + return ; } }); @@ -129,7 +130,7 @@ export const MeterGroup = (inProps) => {
  • {labelIcon} - {item.label} ({item.value}%) + {item?.label} {item?.value && `(${item?.value}%)`}
    • ); @@ -143,14 +144,16 @@ export const MeterGroup = (inProps) => { precentages, values }; - + + const labelElement = ObjectUtils.getJSXElement(labelListRenderer || createLabelList, { values, totalPercent }); + return (
    - {labelPosition === 'start' && ObjectUtils.getJSXElement(labelListRenderer || createLabelList, {values, totalPercent}) } + {labelPosition === 'start' && labelElement} {start && ObjectUtils.getJSXElement(start, templateProps)} {createMeters()} {end && ObjectUtils.getJSXElement(end, templateProps)} - {labelPosition === 'end' && ObjectUtils.getJSXElement(labelListRenderer || createLabelList, {values, totalPercent}) } + {labelPosition === 'end' && labelElement}
    ); }; diff --git a/components/lib/metergroup/metergroup.d.ts b/components/lib/metergroup/metergroup.d.ts index 9ffbe0aa17..a4337bfea4 100644 --- a/components/lib/metergroup/metergroup.d.ts +++ b/components/lib/metergroup/metergroup.d.ts @@ -1,13 +1,14 @@ /** * - * MultiSelect is used to select multiple items from a collection. + * MeterGroup displays scalar measurements within a known range. * - * [Live Demo](https://www.primereact.org/multiselect/) + * [Live Demo](https://www.primereact.org/metergroup/) * - * @module multiselect + * @module metergroup * */ import * as React from 'react'; +import { ComponentType, ReactNode } from 'react'; import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition'; import { CheckboxPassThroughOptions } from '../checkbox/checkbox'; import { ComponentHooks } from '../componentbase/componentbase'; @@ -19,768 +20,155 @@ import { TooltipOptions } from '../tooltip/tooltipoptions'; import { IconType, PassThroughType } from '../utils/utils'; import { VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller/virtualscroller'; -export declare type MultiSelectPassThroughType = PassThroughType; -export declare type MultiSelectPassThroughTransitionType = ReactCSSTransitionProps | ((options: MultiSelectPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined; +export declare type MeterGroupPassThroughType = PassThroughType; +export declare type MeterGroupPassThroughTransitionType = ReactCSSTransitionProps | ((options: MeterGroupPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined; /** - * Custom passthrough(pt) option method. - */ -export interface MultiSelectPassThroughMethodOptions { - props: MultiSelectProps; - state: MultiSelectState; - context: MultiSelectContext; -} - -/** - * Custom passthrough(pt) options. - * @see {@link MultiSelectProps.pt} - */ -export interface MultiSelectPassThroughOptions { - /** - * Uses to pass attributes to the root's DOM element. - */ - root?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the input's DOM element. - */ - input?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the label container's DOM element. - */ - labelContainer?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the label's DOM element. - */ - label?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the token's DOM element. - */ - token?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the token label's DOM element. - */ - tokenLabel?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the remove token icon's DOM element. - */ - removeTokenIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the trigger's DOM element. - */ - trigger?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the trigger icon's DOM element. - */ - triggerIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the clear icon's DOM element. - */ - clearIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the dropdown icon's DOM element. - */ - dropdownIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the panel's DOM element. - */ - panel?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the header's DOM element. - */ - header?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the header checkbox's DOM element. - */ - headerCheckbox?: CheckboxPassThroughOptions; - /** - * Uses to pass attributes to the header checkbox's container DOM element. - */ - headerCheckboxContainer?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the header checkbox icon's DOM element. - */ - headerCheckboxIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the header checkbox's DOM element. - */ - headerSelectAllLabel?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the filter container's DOM element. - */ - filterContainer?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the filter input's DOM element. - */ - filterInput?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the filter icon's DOM element. - */ - filterIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the close button's DOM element. - */ - closeButton?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the close icon's DOM element. - */ - closeIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the wrapper's DOM element. - */ - wrapper?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the VirtualScroller component. - * @see {@link VirtualScrollerPassThroughOptions} - */ - virtualScroller?: VirtualScrollerPassThroughOptions; - /** - * Uses to pass attributes to the list's DOM element. - */ - list?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the item group's DOM element. - */ - itemGroup?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the item's DOM element. - */ - item?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the checkbox container's DOM element. - */ - checkboxContainer?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the checkbox's DOM element. - */ - checkbox?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the checkbox icon's DOM element. - */ - checkboxIcon?: MultiSelectPassThroughType | React.HTMLAttributes>; - /** - * Uses to pass attributes to the emptyMessage's DOM element. - */ - emptyMessage?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes to the hidden input wrapper's DOM element. - */ - hiddenInputWrapper?: MultiSelectPassThroughType>; - /** - * Uses to pass attributes tooltip's DOM element. - * @type {TooltipPassThroughOptions} - */ - tooltip?: TooltipPassThroughOptions; - /** - * Used to manage all lifecycle hooks - * @see {@link ComponentHooks} - */ - hooks?: ComponentHooks; - /** - * Used to control React Transition API. - */ - transition?: MultiSelectPassThroughTransitionType; -} - -/** - * Defines current inline state in MultiSelect component. + * Defines current options in MeterGroup component. */ -export interface MultiSelectState { +export interface MeterGroupContext { /** - * Current focused state as a boolean. + * Current disabled state of the component as a boolean. * @defaultValue false */ - focused: boolean; - /** - * Current filter state as a string. - */ - filterState: string; - /** - * Current overlay visible state as a boolean. - * @defaultValue false - */ - overlayVisible: boolean; -} - -/** - * Defines current options in MultiSelect component. - */ -export interface MultiSelectContext { - /** - * Current selection state of the item as a boolean. - * @defaultValue false - */ - selected: boolean; + disabled: boolean; } /** - * Custom checkbox change event - * @see {@link MultiSelectPanelHeaderTemplateEvent.onChange} - * @event + * Custom passthrough(pt) option method. */ -interface MultiSelectHeaderCheckboxChangeEvent { - originalEvent: React.FormEvent; - checked: boolean; +export interface MeterGroupPassThroughMethodOptions { + props: MeterGroupProps; + context: MeterGroupContext; } /** - * Custom multiselect panel header template event. + * Custom passthrough(pt) options. + * @see {@link MeterGroupProps.pt} */ -interface MultiSelectPanelHeaderTemplateEvent { - /** - * The class name for the header element. - */ - className: string; - /** - * The checkbox element for selecting items. - */ - checkboxElement: HTMLElement; - /** - * Whether the checkbox is checked. - */ - checked: boolean; +export interface MeterGroupPassThroughOptions { /** - * Callback function when the checkbox state is changed. - * @param {MultiSelectHeaderCheckboxChangeEvent} event - Custom checkbox change event + * Used to pass attributes to the root's DOM element. */ - onChange(event: MultiSelectHeaderCheckboxChangeEvent): void; + root?: MeterGroupPassThroughType>; /** - * The element for filtering the items. + * Used to pass attributes to the label list's DOM element. */ - filterElement: JSX.Element; + labellist?: MeterGroupPassThroughType>; /** - * The close element. + * Used to pass attributes to the label list item's DOM element. */ - closeElement: JSX.Element; + labellistitem?: MeterGroupPassThroughType>; /** - * The classname for the close element. + * Used to pass attributes to the label list type's DOM element. */ - closeElementClassName: string; + labellisttype?: MeterGroupPassThroughType>; /** - * The classname for the close icon element. + * Used to pass attributes to the label's DOM element. */ - closeIconClassName: string; + label?: MeterGroupPassThroughType>; /** - * Callback function when the close button is clicked. - * @param {React.MouseEvent} event - Current param + * Used to pass attributes to the meter container's DOM element. */ - onCloseClick(event: React.MouseEvent): void; + metercontainer?: MeterGroupPassThroughType>; /** - * The default element created by the component. + * Used to pass attributes to the meter's DOM element. */ - element: JSX.Element; - /** - * The props of Multiselect component - */ - props: MultiSelectProps; + meter?: MeterGroupPassThroughType>; } -/** - * Custom multiselect change target options - */ -interface MultiSelectChangeTargetOptions { - /** - * The name of the element. - */ - name: string; - /** - * Unique identifier of the element. - */ - id: string; - /** - * The value of the element. - */ - value: any; +interface MeterGroupValue { + value?: number; + label?: string | HTMLElement; + color?: string; + [key: string]: any; } -/** - * Custom change event. - * @see {@link MultiSelectProps.onChange} - * @event - */ -interface MultiSelectChangeEvent { - /** - * Browser event - */ - originalEvent: React.SyntheticEvent; - /** - * Current selected values - */ - value: any; - /** - * Selected option - */ - selectedOption?: any; - /** - * Stops the event from propagating. - */ - stopPropagation(): void; - /** - * Prevents the default action of the event. - */ - preventDefault(): void; - /** - * Additional information about the event. - */ - target: MultiSelectChangeTargetOptions; +interface CustomRenderProps { + totaLPercent: number; + percentages: number[]; + values: MeterGroupValue[]; } /** - * Custom remove event when chip is removed. - * @event + * Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component. + * @group Properties */ -interface MultiSelectRemoveEvent { +interface MeterGroupProps { /** - * Browser event + * Additional CSS classes to apply to the MeterGroup. */ - originalEvent: React.SyntheticEvent; - /** - * Removed item value - */ - value: any; -} + className?: string; -/** - * Custom filter event. - * @see {@link MultiSelectProps.onFilter} - * @event - */ -interface MultiSelectFilterEvent { /** - * Browser event. + * An array of values to be represented by the MeterGroup. */ - originalEvent: React.SyntheticEvent; - /** - * Filter value. - */ - filter: string; -} + values?: MeterGroupValue[]; -/** - * Custom select event. - * @see {@link MultiSelectProps.onSelectAll} - * @event - */ -interface MultiSelectAllEvent { /** - * Browser event. + * The minimum value for the MeterGroup. + * @defaultValue 0 */ - originalEvent: React.SyntheticEvent; - /** - * Whether all data is selected. - */ - checked: boolean; -} + min?: number; -/** - * Multiselect filter options - */ -interface MultiSelectFilterOptions { /** - * Used to filter options - * @param {KeyboardEvent} event - Browser event + * The maximum value for the MeterGroup. + * @defaultValue 100 */ - filter?: (event?: KeyboardEvent) => void; - /** - * Used to reset the filtered options - */ - reset?: () => void; -} + max?: number; -/** - * Custom filter template options. - */ -interface MultiSelectTemplateOptions { - /** - * Style class of the filter. - */ - className: string; - /** - * The filter element. - */ - element: HTMLDivElement; - /** - * Style class of the filter icon. - */ - filterIconClassName: string; - /** - * The filter input options. - */ - filterOptions?: MultiSelectFilterOptions; /** - * The props of multiselect header. + * The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'. + * @defaultValue 'horizontal' */ - props?: any; -} + orientation?: 'horizontal' | 'vertical'; -/** - * Defines valid properties in MultiSelect component. In addition to these, all properties of HTMLDivElement can be used in this component. - * @group Properties - */ -export interface MultiSelectProps extends Omit, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> { - /** - * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. - * @defaultValue document.body - */ - appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement); - /** - * Establishes relationships between the component and label(s) where its value should be one or more element IDs. - */ - ariaLabelledBy?: string | undefined; - /** - * Used to get the child elements of the component. - * @readonly - */ - children?: React.ReactNode | undefined; - /** - * Icon of the checkbox when checked. - */ - checkboxIcon?: IconType | undefined; - /** - * Style class of the element. - */ - className?: string | undefined; - /** - * Close icon of the multiselect panel header. - */ - closeIcon?: IconType | undefined; - /** - * Clear icon of the multiselect input. - */ - clearIcon?: IconType | undefined; - /** - * A property to uniquely match the value in options for better performance. - */ - dataKey?: string | undefined; - /** - * When present, it specifies that the component should be disabled. - * @defaultValue false - */ - disabled?: boolean | undefined; - /** - * Used mode to display the selected item. Valid values are 'comma' and 'chip'. - * @defaultValue comma - */ - display?: 'comma' | 'chip' | undefined; - /** - * Icon class of the dropdown icon. - */ - dropdownIcon?: IconType; - /** - * Template to display when filtering does not return any results. - * @defaultValue No records found - */ - emptyFilterMessage?: React.ReactNode | ((props: MultiSelectProps) => React.ReactNode); - /** - * Text to display when there are no options available. Defaults to global value in Locale configuration. - */ - emptyMessage?: string; - /** - * When specified, displays an input field to filter the items on keyup. - * @defaultValue true - */ - filter?: boolean | undefined; - /** - * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. - * @defaultValue label - */ - filterBy?: string | undefined; - /** - * When the panel is opened, it specifies that the filter input should focus automatically. - * @defaultValue true - */ - filterInputAutoFocus?: boolean | undefined; - /** - * Icon of the filter icon. - */ - filterIcon?: IconType | undefined; - /** - * Locale to use in filtering. The default locale is the host environment's current locale. - * @defaultValue undefined - */ - filterLocale?: string | undefined; - /** - * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals". - * @defaultValue contains - */ - filterMatchMode?: string | undefined; - /** - * Placeholder text to show when filter input is empty. - */ - filterPlaceholder?: string | undefined; - /** - * The template of filter element. - */ - filterTemplate?: React.ReactNode | ((options: MultiSelectTemplateOptions) => React.ReactNode); - /** - * Whether to display selected items in the label section or always display the placeholder as the default label. - * @defaultValue false - */ - fixedPlaceholder?: boolean | undefined; - /** - * Use flex layout for the items panel. - * @defaultValue false - */ - flex?: boolean | undefined; - /** - * Unique identifier of the element. - */ - id?: string | undefined; - /** - * Render the items panel inline. - * @defaultValue false - */ - inline?: boolean | undefined; - /** - * Identifier of the focusable input. - */ - inputId?: string | undefined; - /** - * Reference of the input element. - */ - inputRef?: React.Ref; - /** - * Style class of the items. - */ - itemClassName?: string | undefined; - /** - * The icon displayed in the header when all checkboxes are checked. - */ - itemCheckboxIcon?: IconType | undefined; - /** - * Function that gets the option and returns the content for it. - */ - itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode); - /** - * Decides how many selected item labels to show at most. - */ - maxSelectedLabels?: number | undefined; - /** - * Name of the input element. - */ - name?: string | undefined; - /** - * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. - */ - optionDisabled?: string | ((option: any) => boolean); - /** - * Property name or getter function that refers to the children options of option group. - */ - optionGroupChildren?: string | undefined; - /** - * Property name or getter function to use as the label of an option group. - */ - optionGroupLabel?: string | undefined; - /** - * Template of an option group item. - */ - optionGroupTemplate?: React.ReactNode | ((option: any, index: number) => React.ReactNode); - /** - * Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options. - */ - optionLabel?: string | undefined; - /** - * Property name or getter function to use as the value of an option, defaults to the option itself when not defined. - */ - optionValue?: string | undefined; - /** - * An array of selectitems to display as the available options. - */ - options?: SelectItemOptionsType | undefined; - /** - * Specifies the visibility of the overlay panel. - * @defaultValue false - */ - overlayVisible?: boolean | undefined; - /** - * Style class of the overlay panel element. - */ - panelClassName?: string | undefined; - /** - * Template of the panel footer. - */ - panelFooterTemplate?: React.ReactNode | ((props: MultiSelectProps, hide: () => void) => React.ReactNode); - /** - * Template of the panel header. - */ - panelHeaderTemplate?: React.ReactNode | ((event: MultiSelectPanelHeaderTemplateEvent) => React.ReactNode); - /** - * Inline style of the overlay panel element. - */ - panelStyle?: React.CSSProperties | undefined; - /** - * Label to display when there are no selections. - */ - placeholder?: string | undefined; - /** - * Uses to pass attributes to DOM elements inside the component. - * @type {MultiSelectPassThroughOptions} - */ - pt?: MultiSelectPassThroughOptions; - /** - * Used to configure passthrough(pt) options of the component. - * @type {PassThroughOptions} - */ - ptOptions?: PassThroughOptions; - /** - * When enabled, it removes component related styles in the core. - * @defaultValue false - */ - unstyled?: boolean; - /** - * Icon of the remove chip element. - */ - removeIcon?: IconType | undefined; - /** - * Clears the filter value when hiding the dropdown. - * @defaultValue false - */ - resetFilterOnHide?: boolean | undefined; - /** - * Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. - * @defaultValue 200px - */ - scrollHeight?: string | undefined; - /** - * Whether all data is selected. - * @defaultValue false - */ - selectAll?: boolean | undefined; - /** - * Function that gets an item in the value and returns the content for it. - */ - selectedItemTemplate?: React.ReactNode | ((value: any) => React.ReactNode); - /** - * Label to display after exceeding max selected labels. - * @defaultValue {0} items selected - */ - selectedItemsLabel?: string | undefined; - /** - * Number of maximum options that can be selected. - */ - selectionLimit?: number | undefined; - /** - * When enabled, a clear icon is displayed to clear the value. - * @defaultValue false - */ - showClear?: boolean | undefined; - /** - * Whether to show the select all checkbox inside the panel's header. - * @defaultValue true - */ - showSelectAll?: boolean | undefined; /** - * Label to display if showSelectAll is true + * The position of the label. Can be either 'start' or 'end'. + * @defaultValue 'end' */ - selectAllLabel?: string; - /** - * Inline style of the element. - */ - style?: React.CSSProperties | undefined; - /** - * Index of the element in tabbing order. - */ - tabIndex?: number | undefined; - /** - * Content of the tooltip. - */ - tooltip?: string | undefined; - /** - * Configuration of the tooltip, refer to the tooltip documentation for more information. - */ - tooltipOptions?: TooltipOptions | undefined; - /** - * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. - */ - transitionOptions?: CSSTransitionProps | undefined; - /** - * Whether the option should be used as the value for the select element. - */ - useOptionAsValue?: boolean | undefined; - /** - * Value of the component. - */ - value?: any | undefined; - /** - * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. - */ - virtualScrollerOptions?: VirtualScrollerProps; - /** - * Callback to invoke when the element loses focus. - * @param {React.FocusEvent} event - Browser event. - */ - onBlur?(event: React.FocusEvent): void; - /** - * Callback to invoke when value changes. - * @param {MultiSelectChangeEvent} event - Custom change event. - */ - onChange?(event: MultiSelectChangeEvent): void; - /** - * Callback to invoke on filtering. - * @param {MultiSelectFilterEvent} event - Custom filter event. - */ - onFilter?(event: MultiSelectFilterEvent): void; + labelPosition?: 'start' | 'end'; + /** - * Callback to invoke when the element receives focus. - * @param {React.FocusEvent} event - Browser event. + * The orientation of the label. Can be either 'horizontal' or 'vertical'. + * @defaultValue 'horizontal' */ - onFocus?(event: React.FocusEvent): void; + labelOrientation?: 'horizontal' | 'vertical'; + /** - * Callback to invoke when overlay panel becomes hidden. + * A function to render custom start label. + * @param {CustomRenderProps} prop - Custom Render Props */ - onHide?(): void; + start?: (props: CustomRenderProps) => ReactNode; + /** - * Callback to invoke when a chip is removed. - * @param {MultiSelectRemoveEvent} event - Custom remove event + * A function to render custom end label. + * @param {CustomRenderProps} prop - Custom Render Props */ - onRemove?(event: MultiSelectRemoveEvent): void; + end?: (props: CustomRenderProps) => ReactNode; + /** - * Callback to invoke when all data is selected. - * @param {MultiSelectAllEvent} event - Custom select event. + * A function to render a custom meter. + * @param {CustomRenderProps} prop - Custom Render Props */ - onSelectAll?(event: MultiSelectAllEvent): void; + meterRenderer?: (props: CustomRenderProps) => ReactNode; + /** - * Callback to invoke when overlay panel becomes visible. + * A function to render a custom label list. + * @param {CustomRenderProps} prop - Custom Render Props */ - onShow?(): void; + labelListRenderer?: (props: CustomRenderProps) => ReactNode; } /** - * **PrimeReact - MultiSelect** + * **PrimeReact - MeterGroup** * - * _MultiSelect is used to select multiple items from a collection._ + * _MeterGroup is an extension to standard input element with theming and keyfiltering._ * - * [Live Demo](https://www.primereact.org/multiselect/) + * [Live Demo](https://www.primereact.org/metergroup/) * --- --- * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png) * * @group Component */ -export declare class MultiSelect extends React.Component { - /** - * Used to show the overlay. - */ - public show(): void; - /** - * Used to hide the overlay. - */ - public hide(): void; - /** - * Used to focus the component. - */ - public focus(): void; - /** - * Used to get container element. - * @return {HTMLDivElement} Container element - */ - public getElement(): HTMLDivElement; - /** - * Used to get input element. - * @return {HTMLInputElement} Input element - */ - public getInput(): HTMLInputElement; - /** - * Used to get overlay element. - * @return {HTMLElement} Overlay element - */ - public getOverlay(): HTMLElement; -} +export declare class MeterGroup extends React.Component {} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 2673181640..63b6bc853d 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -2141,6 +2141,103 @@ const Tailwind = { }, transition: TRANSITIONS.overlay }, + metergroup: { + root: ({ props }) => ({ + class: [ + // Flexbox + 'flex gap-4', + + { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' } + ] + }), + metercontainer: ({ props }) => ({ + class: [ + // Flexbox + 'flex', + + { 'flex-col': props.orientation === 'vertical' }, + + // Sizing + { 'w-2 h-full': props.orientation === 'vertical' }, + { 'h-2': props.orientation === 'horizontal' }, + + // Colors + 'bg-gray-200 dark:bg-gray-700', + + // Border Radius + 'rounded-lg' + ] + }), + meter: ({ props }) => ({ + class: [ + // Shape + 'border-0', + + // Rounded Corners - Horizontal + { + 'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal' + }, + + // Rounded Corners - Vertical + { + 'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical' + }, + + // Colors + 'bg-primary-500 dark:bg-primary-400' + ] + }), + labellist: ({ props }) => ({ + class: [ + // Display & Flexbox + 'flex flex-wrap', + + { 'gap-4': props.labelOrientation === 'horizontal' }, + + { 'gap-2': props.labelOrientation === 'vertical' }, + + { 'flex-col': props.labelOrientation === 'vertical' }, + + // Conditional Alignment - Horizontal + { + 'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end', + 'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start' + }, + + // Conditional Alignment - Vertical + { + 'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end', + 'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start' + }, + + // List Styling + 'm-0 p-0 list-none' + ] + }), + labellistitem: { + class: [ + // Flexbox + 'inline-flex', + 'items-center', + 'gap-2' + ] + }, + labellisttype: { + class: [ + // Display + 'inline-flex', + + // Background Color + 'bg-primary-500 dark:bg-primary-400', + + // Size + 'w-2 h-2', + + // Rounded Shape + 'rounded-full' + ] + } + }, //MEDIA image: { root: 'relative inline-block', diff --git a/pages/metergroup/index.js b/pages/metergroup/index.js index 72a971a0d8..53dac7ca43 100644 --- a/pages/metergroup/index.js +++ b/pages/metergroup/index.js @@ -8,6 +8,11 @@ import { LabelDoc } from '@/components/doc/metergroup/labeldoc'; import { VerticalDoc } from '@/components/doc/metergroup/verticaldoc'; import { MinMaxDoc } from '@/components/doc/metergroup/minmaxdoc'; import { TemplateDoc } from '@/components/doc/metergroup/templatedoc'; +import { AccessibilityDoc } from '@/components/doc/metergroup/accessibilitydoc'; +import { Wireframe } from '@/components/doc/metergroup/pt/wireframe'; +import { PTDoc } from '@/components/doc/metergroup/pt/ptdoc'; +import { StyledDoc } from '@/components/doc/metergroup/theming/styleddoc'; +import { TailwindDoc } from '@/components/doc/metergroup/theming/tailwinddoc'; const MessagesDemo = () => { const docs = [ @@ -50,10 +55,48 @@ const MessagesDemo = () => { id: 'template', label: 'Template', component: TemplateDoc + }, + { + id: 'accessibility', + label: 'Accessibility', + component: AccessibilityDoc + } + ]; + + const ptDocs = [ + { + id: 'pt.wireframe', + label: 'Wireframe', + component: Wireframe + }, + { + id: 'pt.metergroup.options', + label: 'MeterGroup PT Options', + component: DocApiTable + } + ]; + + const themingDocs = [ + { + 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 + } + ] } ]; - return ; + return ; }; export default MessagesDemo; From d2aa7010956fbc4855097213800e3640e856c797 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Thu, 15 Feb 2024 13:48:22 +0300 Subject: [PATCH 06/31] wireframe image update --- components/doc/metergroup/pt/wireframe.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/metergroup/pt/wireframe.js b/components/doc/metergroup/pt/wireframe.js index f333ee14e7..2bfcccfa8c 100644 --- a/components/doc/metergroup/pt/wireframe.js +++ b/components/doc/metergroup/pt/wireframe.js @@ -5,7 +5,7 @@ export const Wireframe = (props) => { <>
    - menubar + metergroup
    ); From 87ed03a89de46fb3283fac82d8c3561c456607d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Thu, 15 Feb 2024 13:52:44 +0300 Subject: [PATCH 07/31] NPM Format --- components/doc/metergroup/templatedoc.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/doc/metergroup/templatedoc.js b/components/doc/metergroup/templatedoc.js index 814dd9dc8c..e246e18fa5 100644 --- a/components/doc/metergroup/templatedoc.js +++ b/components/doc/metergroup/templatedoc.js @@ -225,5 +225,3 @@ export default function TemplateDemo() { ); } - - From f78e9938d3946b08445c6807afb7edd7862a471c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Sun, 18 Feb 2024 19:46:59 +0300 Subject: [PATCH 08/31] Fixed duplicated function usage --- components/lib/metergroup/MeterGroup.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js index 3d52fe68f6..99349e589a 100644 --- a/components/lib/metergroup/MeterGroup.js +++ b/components/lib/metergroup/MeterGroup.js @@ -45,10 +45,11 @@ export const MeterGroup = (inProps) => { const createMeters = () => { const meters = values.map((item, index) => { + const calculatedPercantage = calculatePercentage(item.value); const meterInlineStyles = { backgroundColor: item.color, - width: orientation === 'horizontal' ? calculatePercentage(item.value) + '%' : 'auto', - height: orientation === 'vertical' ? calculatePercentage(item.value) + '%' : 'auto' + width: orientation === 'horizontal' ? calculatedPercantage + '%' : 'auto', + height: orientation === 'vertical' ? calculatedPercantage + '%' : 'auto' }; const meterProps = mergeProps( @@ -67,7 +68,7 @@ export const MeterGroup = (inProps) => { ptm('meter') ); - return ObjectUtils.getJSXElement(item.meterTemplate || meterRenderer, { ...item, percentage: calculatePercentage(item.value), index }, meterTemplateProps); + return ObjectUtils.getJSXElement(item.meterTemplate || meterRenderer, { ...item, percentage: calculatedPercantage, index }, meterTemplateProps); } else { return ; } From 35e174a592737229c957ba376911c9f7c3fa6b6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Sun, 18 Feb 2024 19:48:15 +0300 Subject: [PATCH 09/31] Gitignore update for vscode options --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 8792496601..9259819eda 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ tsconfig.tsbuildinfo # misc .DS_Store *.pem +*.code-workspace # debug npm-debug.log* From 407ccf9e6507ee553f0dcd07be1243a5c6d06e8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Sun, 18 Feb 2024 19:49:30 +0300 Subject: [PATCH 10/31] Removed unnecessary file --- .../lib/progressbar/primereact.code-workspace | 30 ------------------- 1 file changed, 30 deletions(-) delete mode 100644 components/lib/progressbar/primereact.code-workspace diff --git a/components/lib/progressbar/primereact.code-workspace b/components/lib/progressbar/primereact.code-workspace deleted file mode 100644 index 84e68f324f..0000000000 --- a/components/lib/progressbar/primereact.code-workspace +++ /dev/null @@ -1,30 +0,0 @@ -{ - "folders": [ - { - "name": "primereact", - "path": "../../../../GitHub/primereact" - } - ], - "settings": { - "workbench.colorCustomizations": { - "activityBar.activeBackground": "#007eff", - "activityBar.background": "#007eff", - "activityBar.foreground": "#e7e7e7", - "activityBar.inactiveForeground": "#e7e7e799", - "activityBarBadge.background": "#ff9fcf", - "activityBarBadge.foreground": "#15202b", - "commandCenter.border": "#e7e7e799", - "sash.hoverBorder": "#007eff", - "statusBar.background": "#0065cc", - "statusBar.foreground": "#e7e7e7", - "statusBarItem.hoverBackground": "#007eff", - "statusBarItem.remoteBackground": "#0065cc", - "statusBarItem.remoteForeground": "#e7e7e7", - "titleBar.activeBackground": "#0065cc", - "titleBar.activeForeground": "#e7e7e7", - "titleBar.inactiveBackground": "#0065cc99", - "titleBar.inactiveForeground": "#e7e7e799" - }, - "peacock.color": "#0065cc" - } -} From 0454f97cf831987da15edca5a0fe9d0e068dedab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Thu, 29 Feb 2024 17:23:31 +0300 Subject: [PATCH 11/31] Updated structure of checkbox --- components/lib/checkbox/Checkbox.js | 133 ++++++++---------- components/lib/checkbox/CheckboxBase.js | 40 ++---- components/lib/checkbox/checkbox.d.ts | 27 +--- components/lib/componentbase/ComponentBase.js | 29 ++-- 4 files changed, 84 insertions(+), 145 deletions(-) diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index cb818642b2..dc92a7a296 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -12,12 +12,8 @@ export const Checkbox = React.memo( const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = CheckboxBase.getProps(inProps, context); - const [focusedState, setFocusedState] = React.useState(false); const { ptm, cx, isUnstyled } = CheckboxBase.setMetaData({ props, - state: { - focused: focusedState - }, context: { checked: props.checked === props.trueValue, disabled: props.disabled @@ -28,16 +24,17 @@ export const Checkbox = React.memo( const elementRef = React.useRef(null); const inputRef = React.useRef(props.inputRef); - const onClick = (event) => { + const isChecked = () => { + return props.checked === props.trueValue; + }; + + const onChange = (event) => { if (props.disabled || props.readOnly) { return; } - if (props.onChange || props.onClick) { + if (props.onChange) { const checked = isChecked(); - const checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object; - const isInputToggled = event.target === inputRef.current; - const isCheckboxToggled = checkboxClicked && event.target.checked !== checked; const value = checked ? props.falseValue : props.trueValue; const eventData = { originalEvent: event, @@ -58,39 +55,23 @@ export const Checkbox = React.memo( } }; - props.onClick && props.onClick(eventData); + props.onChange && props.onChange(eventData); // do not continue if the user defined click wants to prevent if (event.defaultPrevented) { return; } - if (isInputToggled || isCheckboxToggled) { - props.onChange && props.onChange(eventData); - } - DomHandler.focus(inputRef.current); - event.preventDefault(); } }; const onFocus = () => { - setFocusedState(true); + props?.onFocus?.(); }; const onBlur = () => { - setFocusedState(false); - }; - - const onKeyDown = (event) => { - if (event.code === 'Space' || event.key === ' ') { - // event.key is for Android support - onClick(event); - } - }; - - const isChecked = () => { - return props.checked === props.trueValue; + props?.onBlur?.(); }; React.useImperativeHandle(ref, () => ({ @@ -117,21 +98,11 @@ export const Checkbox = React.memo( const checked = isChecked(); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); const otherProps = CheckboxBase.getOtherProps(props); - const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); - const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') - ); - const icon = checked ? props.icon || : null; - const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked }); const rootProps = mergeProps( { id: props.id, - className: classNames(props.className, cx('root', { checked, focusedState })), + className: classNames(props.className, cx('root', { checked })), style: props.style, - onClick: (e) => onClick(e), 'data-p-highlight': checked, 'data-p-disabled': props.disabled, onContextMenu: props.onContextMenu, @@ -141,48 +112,58 @@ export const Checkbox = React.memo( ptm('root') ); - const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') - ); - - const hiddenInputProps = mergeProps( - { - id: props.inputId, - type: 'checkbox', - name: props.name, - tabIndex: props.tabIndex, - defaultChecked: checked, - onFocus: (e) => onFocus(e), - onBlur: (e) => onBlur(e), - onKeyDown: (e) => onKeyDown(e), - disabled: props.disabled, - readOnly: props.readOnly, - required: props.required, - ...ariaProps - }, - ptm('hiddenInput') - ); + const createInputElement = () => { + const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); + const inputProps = mergeProps( + { + id: props.inputId, + type: 'checkbox', + className: cx('input'), + name: props.name, + tabIndex: props.tabIndex, + defaultChecked: checked, + onFocus: (e) => onFocus(e), + onBlur: (e) => onBlur(e), + onChange: (e) => onChange(e), + disabled: props.disabled, + readOnly: props.readOnly, + required: props.required, + checked: isChecked(), + ...ariaProps + }, + ptm('input') + ); + + return ; + }; - const inputProps = mergeProps( - { - className: cx('input', { checked, focusedState }), - 'data-p-highlight': checked, - 'data-p-disabled': props.disabled, - 'data-p-focus': focusedState - }, - ptm('input') - ); + const createBoxElement = () => { + const iconProps = mergeProps( + { + className: cx('icon') + }, + ptm('icon') + ); + const boxProps = mergeProps( + { + className: cx('box', { checked }), + 'data-p-highlight': checked, + 'data-p-disabled': props.disabled + }, + ptm('box') + ); + + const icon = checked ? props.icon || : null; + const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked }); + + return
    {checkboxIcon}
    ; + }; return ( <>
    -
    - -
    -
    {checkboxIcon}
    + {createInputElement()} + {createBoxElement()}
    {hasTooltip && } diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js index 993a0ae489..05f2c86507 100644 --- a/components/lib/checkbox/CheckboxBase.js +++ b/components/lib/checkbox/CheckboxBase.js @@ -2,41 +2,18 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - icon: 'p-checkbox-icon p-c', - input: ({ props, checked, focusedState }) => - classNames('p-checkbox-box', { - 'p-highlight': checked, - 'p-disabled': props.disabled, - 'p-focus': focusedState - }), + box: 'p-checkbox-box', + input: 'p-checkbox-input', + icon: 'p-checkbox-icon', root: ({ props, checked, focusedState }) => classNames('p-checkbox p-component', { - 'p-checkbox-checked': checked, - 'p-checkbox-disabled': props.disabled, - 'p-checkbox-focused': focusedState + 'p-highlight': checked, + 'p-disabled': props.disabled, + 'p-invalid': props.invalid, + 'p-variant-filled': props.variant === 'filled' }) }; -const styles = ` -.p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; -} - -.p-checkbox.p-checkbox-disabled { - cursor: auto; -} - -.p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; -} -`; - export const CheckboxBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Checkbox', @@ -65,7 +42,6 @@ export const CheckboxBase = ComponentBase.extend({ children: undefined }, css: { - classes, - styles + classes } }); diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts index 80d64edd8d..7385aa2d5f 100644 --- a/components/lib/checkbox/checkbox.d.ts +++ b/components/lib/checkbox/checkbox.d.ts @@ -39,6 +39,10 @@ export interface CheckboxPassThroughOptions { * Uses to pass attributes to the input's DOM element. */ input?: CheckboxPassThroughType>; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughOptionType; /** * Uses to pass attributes to the icon's DOM element. */ @@ -48,14 +52,6 @@ export interface CheckboxPassThroughOptions { * @type {TooltipPassThroughOptions} */ tooltip?: TooltipPassThroughOptions; - /** - * Uses to pass attributes to the hidden input wrapper's DOM element. - */ - hiddenInputWrapper?: CheckboxPassThroughType>; - /** - * Uses to pass attributes to the hidden input's DOM element. - */ - hiddenInput?: CheckboxPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} @@ -98,19 +94,11 @@ export interface CheckboxState { */ interface CheckboxChangeEvent extends FormEvent {} -/** - * Custom click event. - * @see {@link CheckboxProps.onClick} - * @extends {FormEvent } - * @event - */ -interface CheckboxClickEvent extends FormEvent {} - /** * Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface CheckboxProps extends Omit, HTMLDivElement>, 'onChange' | 'onClick' | 'ref'> { +export interface CheckboxProps extends Omit, HTMLDivElement>, 'onChange' | 'ref'> { /** * Unique identifier of the element. */ @@ -197,11 +185,6 @@ export interface CheckboxProps extends Omit} event - Browser event diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index 58b07cec28..dcc88fe3d1 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -96,23 +96,22 @@ const buttonStyles = ` } `; const checkboxStyles = ` -.p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; -} + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } -.p-checkbox.p-checkbox-disabled { - cursor: auto; -} + .p-checkbox-input { + cursor: pointer; + } -.p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; -} + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } `; const inputTextStyles = ` .p-inputtext { From 9ad8c24b222aca70e52a8b55b0da522a2a593ac2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 16:58:23 +0300 Subject: [PATCH 12/31] Checkbox styles update --- components/lib/checkbox/Checkbox.js | 3 ++- components/lib/checkbox/CheckboxBase.js | 24 +++++++++++++++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index dc92a7a296..746314c837 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -20,7 +20,8 @@ export const Checkbox = React.memo( } }); - useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox', styled: true }); + useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox' }); + const elementRef = React.useRef(null); const inputRef = React.useRef(props.inputRef); diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js index 05f2c86507..6d11375d13 100644 --- a/components/lib/checkbox/CheckboxBase.js +++ b/components/lib/checkbox/CheckboxBase.js @@ -14,6 +14,27 @@ const classes = { }) }; +const styles = ` +@layer primereact { + .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; + } +} +`; + export const CheckboxBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Checkbox', @@ -42,6 +63,7 @@ export const CheckboxBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); From 6c9181f3d91e0a720cfbf919b8adedb19d7956ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 16:58:39 +0300 Subject: [PATCH 13/31] RadioButton structure update --- components/lib/componentbase/ComponentBase.js | 47 +++--- components/lib/radiobutton/RadioButton.js | 141 ++++++++---------- components/lib/radiobutton/RadioButtonBase.js | 26 ++-- 3 files changed, 104 insertions(+), 110 deletions(-) diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index dcc88fe3d1..e8db072493 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -222,32 +222,35 @@ const inputTextStyles = ` } `; const radioButtonStyles = ` -.p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; -} + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } -.p-radiobutton-box { - display: flex; - justify-content: center; - align-items: center; -} + .p-radiobutton-input { + cursor: pointer; + } -.p-radiobutton-icon { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - transform: translateZ(0) scale(.1); - border-radius: 50%; - visibility: hidden; -} + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } -.p-radiobutton-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1.0, 1.0); - visibility: visible; -} + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1.0, 1.0); + visibility: visible; + } `; const iconStyles = ` .p-icon { diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 5bba326b67..63c4d74806 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -12,29 +12,25 @@ export const RadioButton = React.memo( const context = React.useContext(PrimeReactContext); const props = RadioButtonBase.getProps(inProps, context); - const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); const inputRef = React.useRef(props.inputRef); const { ptm, cx, isUnstyled } = RadioButtonBase.setMetaData({ - props, - state: { - focused: focusedState - } + props }); - useHandleStyle(RadioButtonBase.css.styles, isUnstyled, { name: 'radiobutton', styled: true }); + useHandleStyle(RadioButtonBase.css.styles, isUnstyled, { name: 'radiobutton' }); const select = (event) => { - onClick(event); + onChange(event); }; - const onClick = (event) => { + const onChange = (event) => { if (props.disabled) { return; } - if (props.onChange || props.onClick) { + if (props.onChange) { const checked = props.checked; const radioClicked = event.target instanceof HTMLDivElement; const inputClicked = event.target === inputRef.current; @@ -61,7 +57,7 @@ export const RadioButton = React.memo( } }; - props.onClick && props.onClick(eventData); + props?.onChange?.(eventData); // do not continue if the user defined click wants to prevent if (event.defaultPrevented) { @@ -69,7 +65,7 @@ export const RadioButton = React.memo( } if (isInputToggled || isRadioToggled) { - props.onChange && props.onChange(eventData); + props?.onChange?.(eventData); if (isRadioToggled) { inputRef.current.checked = value; @@ -77,24 +73,24 @@ export const RadioButton = React.memo( } DomHandler.focus(inputRef.current); - event.preventDefault(); } }; - const onFocus = () => { - setFocusedState(true); + const onFocus = (event) => { + props?.onFocus?.(event); }; - const onBlur = () => { - setFocusedState(false); + const onBlur = (event) => { + props?.onBlur?.(event); }; - const onKeyDown = (event) => { - if (event.code === 'Space' || event.key === ' ') { - // event.key is for Android support - onClick(event); - } - }; + React.useImperativeHandle(ref, () => ({ + props, + select, + focus: () => DomHandler.focus(inputRef.current), + getElement: () => elementRef.current, + getInput: () => inputRef.current + })); React.useEffect(() => { if (inputRef.current) { @@ -112,75 +108,70 @@ export const RadioButton = React.memo( } }); - React.useImperativeHandle(ref, () => ({ - props, - select, - focus: () => DomHandler.focus(inputRef.current), - getElement: () => elementRef.current, - getInput: () => inputRef.current - })); - const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); const otherProps = RadioButtonBase.getOtherProps(props); - const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const rootProps = mergeProps( { - className: classNames(props.className, cx('root', { focusedState })), + id: props.id, + className: classNames(props.className, cx('root')), style: props.style, - onClick: onClick, 'data-p-checked': props.checked }, RadioButtonBase.getOtherProps(props), ptm('root') ); - const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') - ); - - const hiddenInputProps = mergeProps( - { - type: 'radio', - name: props.name, - defaultChecked: props.checked, - onFocus: onFocus, - onBlur: onBlur, - onKeyDown: onKeyDown, - disabled: props.disabled, - required: props.required, - tabIndex: props.tabIndex, - ...ariaProps - }, - ptm('hiddenInput') - ); - - const inputProps = mergeProps( - { - className: cx('input', { focusedState }) - }, - ptm('input') - ); + const createInputElement = () => { + const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); + const inputProps = mergeProps( + { + id: props.inputId, + type: 'radio', + name: props.name, + defaultChecked: props.checked, + onFocus: onFocus, + onBlur: onBlur, + onChange: onChange, + disabled: props.disabled, + required: props.required, + tabIndex: props.tabIndex, + className: cx('input'), + ...ariaProps + }, + ptm('hiddenInput') + ); + + return ; + }; - const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') - ); + const createBoxElement = () => { + const boxProps = mergeProps( + { + className: cx('box') + }, + ptm('input') + ); + + const iconProps = mergeProps( + { + className: cx('icon') + }, + ptm('icon') + ); + + return ( +
    +
    +
    + ); + }; return ( <> -
    -
    - -
    -
    -
    -
    +
    + {createInputElement()} + {createBoxElement()}
    {hasTooltip && } diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js index 5704c26fc6..d254e36472 100644 --- a/components/lib/radiobutton/RadioButtonBase.js +++ b/components/lib/radiobutton/RadioButtonBase.js @@ -2,36 +2,36 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props, focusedState }) => + root: ({ props }) => classNames('p-radiobutton p-component', { - 'p-radiobutton-checked': props.checked, - 'p-radiobutton-disabled': props.disabled, - 'p-radiobutton-focused': focusedState - }), - input: ({ props, focusedState }) => - classNames('p-radiobutton-box', { 'p-highlight': props.checked, 'p-disabled': props.disabled, - 'p-focus': focusedState + 'p-invalid': props.invalid }), + box: 'p-radiobutton-box', + input: 'p-radiobutton-input', icon: 'p-radiobutton-icon' }; const styles = ` @layer primereact { .p-radiobutton { + position: relative; display: inline-flex; - cursor: pointer; 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; @@ -39,8 +39,8 @@ const styles = ` border-radius: 50%; visibility: hidden; } - - .p-radiobutton-box.p-highlight .p-radiobutton-icon { + + .p-radiobutton.p-highlight .p-radiobutton-icon { transform: translateZ(0) scale(1.0, 1.0); visibility: visible; } From 7b7bba83cbf2d6415a078697b2ef2e055e991056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 17:39:47 +0300 Subject: [PATCH 14/31] Checkbox default styles --- components/lib/checkbox/CheckboxBase.js | 13 ++++++++++++- components/lib/componentbase/ComponentBase.js | 13 ++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js index 6d11375d13..e079f427e7 100644 --- a/components/lib/checkbox/CheckboxBase.js +++ b/components/lib/checkbox/CheckboxBase.js @@ -5,7 +5,7 @@ const classes = { box: 'p-checkbox-box', input: 'p-checkbox-input', icon: 'p-checkbox-icon', - root: ({ props, checked, focusedState }) => + root: ({ props, checked }) => classNames('p-checkbox p-component', { 'p-highlight': checked, 'p-disabled': props.disabled, @@ -24,6 +24,17 @@ const styles = ` } .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; } diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index e8db072493..c6d06cadc2 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -96,7 +96,7 @@ const buttonStyles = ` } `; const checkboxStyles = ` - .p-checkbox { + p-checkbox { position: relative; display: inline-flex; user-select: none; @@ -104,6 +104,17 @@ const checkboxStyles = ` } .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; } From 0c44b0f8ef1169e7bae4f6c9020c2bdeeaa5c92e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 17:42:36 +0300 Subject: [PATCH 15/31] Radio button typo fix and api doc update --- components/lib/radiobutton/RadioButton.js | 4 ++-- components/lib/radiobutton/radiobutton.d.ts | 8 ++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 63c4d74806..2073905f06 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -139,7 +139,7 @@ export const RadioButton = React.memo( className: cx('input'), ...ariaProps }, - ptm('hiddenInput') + ptm('input') ); return ; @@ -150,7 +150,7 @@ export const RadioButton = React.memo( { className: cx('box') }, - ptm('input') + ptm('box') ); const iconProps = mergeProps( diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts index bbb0700b54..eea506f3e2 100644 --- a/components/lib/radiobutton/radiobutton.d.ts +++ b/components/lib/radiobutton/radiobutton.d.ts @@ -43,13 +43,9 @@ export interface RadioButtonPassThroughOptions { */ icon?: RadioButtonPassThroughType>; /** - * Uses to pass attributes to the hidden accessible DOM element wrapper. - */ - hiddenInputWrapper?: RadioButtonPassThroughType>; - /** - * Uses to pass attributes to the hidden accessible DOM element. + * Uses to pass attributes to the input's DOM element. */ - hiddenInput?: RadioButtonPassThroughType>; + input?: RadioButtonPassThroughType>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} From 2c93056ebe233c56525b1bd190e81ce6a5155651 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 18:06:19 +0300 Subject: [PATCH 16/31] Updated apidoc files --- components/lib/checkbox/checkbox.d.ts | 2 +- components/lib/radiobutton/radiobutton.d.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts index 7385aa2d5f..8ddcb1f8df 100644 --- a/components/lib/checkbox/checkbox.d.ts +++ b/components/lib/checkbox/checkbox.d.ts @@ -42,7 +42,7 @@ export interface CheckboxPassThroughOptions { /** * Used to pass attributes to the box's DOM element. */ - box?: CheckboxPassThroughOptionType; + box?: CheckboxPassThroughType>; /** * Uses to pass attributes to the icon's DOM element. */ diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts index eea506f3e2..77b02e3524 100644 --- a/components/lib/radiobutton/radiobutton.d.ts +++ b/components/lib/radiobutton/radiobutton.d.ts @@ -34,10 +34,6 @@ export interface RadioButtonPassThroughOptions { * Uses to pass attributes to the root's DOM element. */ root?: RadioButtonPassThroughType>; - /** - * Uses to pass attributes to the input's DOM element. - */ - input?: RadioButtonPassThroughType>; /** * Uses to pass attributes to the icon's DOM element. */ @@ -46,6 +42,10 @@ export interface RadioButtonPassThroughOptions { * Uses to pass attributes to the input's DOM element. */ input?: RadioButtonPassThroughType>; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughType>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} From 6894603dde5dff90cbd302a63bae55b3f8cd710d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 18:06:38 +0300 Subject: [PATCH 17/31] InputSwitch structure update --- components/lib/inputswitch/InputSwitch.js | 47 +++++-------------- components/lib/inputswitch/InputSwitchBase.js | 28 ++++++++--- components/lib/inputswitch/inputswitch.d.ts | 8 +--- 3 files changed, 36 insertions(+), 47 deletions(-) diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index b3a08239f6..f4afd07c7f 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -11,12 +11,8 @@ export const InputSwitch = React.memo( const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = InputSwitchBase.getProps(inProps, context); - const [focusedState, setFocusedState] = React.useState(false); const { ptm, cx, isUnstyled } = InputSwitchBase.setMetaData({ - props, - state: { - focused: focusedState - } + props }); useHandleStyle(InputSwitchBase.css.styles, isUnstyled, { name: 'inputswitch' }); @@ -24,18 +20,7 @@ export const InputSwitch = React.memo( const inputRef = React.useRef(props.inputRef); const checked = props.checked === props.trueValue; - const onClick = (event) => { - if (props.disabled) { - return; - } - - toggle(event); - DomHandler.focus(inputRef.current); - - event.preventDefault(); - }; - - const toggle = (event) => { + const onChange = (event) => { if (props.onChange) { const value = checked ? props.falseValue : props.trueValue; @@ -57,14 +42,14 @@ export const InputSwitch = React.memo( } }; + console.log(checked); + const onFocus = (event) => { - setFocusedState(true); - props.onFocus && props.onFocus(event); + props?.onFocus?.(event); }; const onBlur = (event) => { - setFocusedState(false); - props.onBlur && props.onBlur(event); + props?.onBlur?.(event); }; React.useImperativeHandle(ref, () => ({ @@ -90,9 +75,8 @@ export const InputSwitch = React.memo( const rootProps = mergeProps( { - className: classNames(props.className, cx('root', { focusedState, checked })), + className: classNames(props.className, cx('root', { checked })), style: props.style, - onClick, role: 'checkbox', 'aria-checked': checked, 'data-p-highlight': checked, @@ -101,29 +85,24 @@ export const InputSwitch = React.memo( otherProps, ptm('root') ); - const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') - ); - const hiddenInputProps = mergeProps( + const inputProps = mergeProps( { type: 'checkbox', id: props.inputId, name: props.name, checked: checked, - onChange: toggle, + onChange: onChange, onFocus: onFocus, onBlur: onBlur, disabled: props.disabled, role: 'switch', tabIndex: props.tabIndex, 'aria-checked': checked, + className: cx('input'), ...ariaProps }, - ptm('hiddenInput') + ptm('input') ); const sliderProps = mergeProps( @@ -136,9 +115,7 @@ export const InputSwitch = React.memo( return ( <>
    -
    - -
    +
    {hasTooltip && } diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js index 8227022d8b..d15ae89f77 100644 --- a/components/lib/inputswitch/InputSwitchBase.js +++ b/components/lib/inputswitch/InputSwitchBase.js @@ -2,12 +2,13 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props, focusedState, checked }) => + root: ({ props, checked }) => classNames('p-inputswitch p-component', { - 'p-inputswitch-checked': checked, + 'p-highlight': checked, 'p-disabled': props.disabled, - 'p-focus': focusedState + 'p-invalid': props.invalid }), + input: 'p-inputswitch-input', slider: 'p-inputswitch-slider' }; @@ -17,7 +18,22 @@ const styles = ` 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; @@ -27,10 +43,10 @@ const styles = ` bottom: 0; border: 1px solid transparent; } - + .p-inputswitch-slider:before { position: absolute; - content: ""; + content: ''; top: 50%; } } diff --git a/components/lib/inputswitch/inputswitch.d.ts b/components/lib/inputswitch/inputswitch.d.ts index a0d7a0cd44..56dd868f43 100644 --- a/components/lib/inputswitch/inputswitch.d.ts +++ b/components/lib/inputswitch/inputswitch.d.ts @@ -39,13 +39,9 @@ export interface InputSwitchPassThroughOptions { */ slider?: InputSwitchPassThroughType>; /** - * Uses to pass attributes to the hidden input wrapper's DOM element. + * Uses to pass attributes to the input's DOM element. */ - hiddenInputWrapper?: InputSwitchPassThroughType>; - /** - * Uses to pass attributes to the hidden input's DOM element. - */ - hiddenInput?: InputSwitchPassThroughType>; + input?: InputSwitchPassThroughType>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} From 23c09835d5e6239de1d770387632c0f16a45a455 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 18:07:14 +0300 Subject: [PATCH 18/31] Removed unnecessary debugging lines --- components/lib/inputswitch/InputSwitch.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index f4afd07c7f..fcc02ecc53 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -42,8 +42,6 @@ export const InputSwitch = React.memo( } }; - console.log(checked); - const onFocus = (event) => { props?.onFocus?.(event); }; From 2a0c5c0102e0fd3b574f37e07ce91170545b2f4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 1 Mar 2024 20:05:51 +0300 Subject: [PATCH 19/31] Added readonly and invalid props --- components/lib/checkbox/Checkbox.js | 3 ++- components/lib/radiobutton/RadioButton.js | 3 ++- components/lib/radiobutton/radiobutton.d.ts | 27 +++++++++------------ 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index 746314c837..63a1d56e8d 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -30,7 +30,7 @@ export const Checkbox = React.memo( }; const onChange = (event) => { - if (props.disabled || props.readOnly) { + if (props.disabled || props.readonly) { return; } @@ -129,6 +129,7 @@ export const Checkbox = React.memo( disabled: props.disabled, readOnly: props.readOnly, required: props.required, + 'aria-invalid': props.invalid, checked: isChecked(), ...ariaProps }, diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 2073905f06..3b17e015b4 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -26,7 +26,7 @@ export const RadioButton = React.memo( }; const onChange = (event) => { - if (props.disabled) { + if (props.disabled || props.readonly) { return; } @@ -134,6 +134,7 @@ export const RadioButton = React.memo( onBlur: onBlur, onChange: onChange, disabled: props.disabled, + readonly: props.readonly, required: props.required, tabIndex: props.tabIndex, className: cx('input'), diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts index 77b02e3524..46b102eb94 100644 --- a/components/lib/radiobutton/radiobutton.d.ts +++ b/components/lib/radiobutton/radiobutton.d.ts @@ -77,19 +77,11 @@ export interface RadioButtonState { */ interface RadioButtonChangeEvent extends FormEvent {} -/** - * Custom click event. - * @see {@link RadioButtonProps.onClick} - * @extends {FormEvent} - * @event - */ -interface RadioButtonClickEvent extends FormEvent {} - /** * Defines valid properties in RadioButton component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface RadioButtonProps extends Omit, HTMLDivElement>, 'onChange' | 'onClick' | 'ref' | 'pt'> { +export interface RadioButtonProps extends Omit, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> { /** * When present, it specifies that the component should automatically get focus on load. * @defaultValue false @@ -117,10 +109,20 @@ export interface RadioButtonProps extends Omit Date: Fri, 1 Mar 2024 20:06:09 +0300 Subject: [PATCH 20/31] ToggleButton structure update --- components/lib/togglebutton/ToggleButton.js | 56 ++++++++++++------- .../lib/togglebutton/ToggleButtonBase.js | 48 ++++++++++++---- components/lib/togglebutton/togglebutton.d.ts | 23 ++++++++ 3 files changed, 96 insertions(+), 31 deletions(-) diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js index 00848541e0..d9e4fad643 100644 --- a/components/lib/togglebutton/ToggleButton.js +++ b/components/lib/togglebutton/ToggleButton.js @@ -13,12 +13,8 @@ export const ToggleButton = React.memo( const context = React.useContext(PrimeReactContext); const props = ToggleButtonBase.getProps(inProps, context); const elementRef = React.useRef(null); - const [focusedState, setFocusedState] = React.useState(false); const { ptm, cx, isUnstyled } = ToggleButtonBase.setMetaData({ - props, - state: { - focused: focusedState - } + props }); useHandleStyle(ToggleButtonBase.css.styles, isUnstyled, { name: 'togglebutton' }); @@ -29,7 +25,7 @@ export const ToggleButton = React.memo( const icon = props.checked ? props.onIcon : props.offIcon; const toggle = (e) => { - if (!props.disabled && props.onChange) { + if (!props.disabled && props.onChange && !props.readonly) { props.onChange({ originalEvent: e, value: !props.checked, @@ -56,13 +52,11 @@ export const ToggleButton = React.memo( }; const onFocus = (event) => { - setFocusedState(true); - props.onFocus && props.onFocus(event); + props?.onFocus?.(event); }; const onBlur = (event) => { - setFocusedState(false); - props.onBlur && props.onBlur(event); + props?.onBlur?.(event); }; const createIcon = () => { @@ -108,27 +102,51 @@ export const ToggleButton = React.memo( ref: elementRef, id: props.id, className: cx('root', { hasIcon, hasLabel }), + 'data-p-highlight': props.checked, + 'data-p-disabled': props.disabled + }, + ToggleButtonBase.getOtherProps(props), + ptm('root') + ); + + const inputProps = mergeProps( + { + id: props.inputId, + className: cx('input'), style: props.style, - onClick: toggle, + onChange: toggle, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, tabIndex: tabIndex, - role: 'button', + role: 'switch', + type: 'checkbox', 'aria-pressed': props.checked, - 'data-p-highlight': props.checked, - 'data-p-disabled': props.disabled + 'aria-invalid': props.invalid, + disabled: props.disabled, + readonly: props.readonly, + value: props.checked, + checked: props.checked }, - ToggleButtonBase.getOtherProps(props), - ptm('root') + ptm('input') + ); + + const boxProps = mergeProps( + { + className: cx('box', { hasIcon, hasLabel }) + }, + ptm('box') ); return ( <>
    - {iconElement} - {label} - + +
    + {iconElement} + {label} + +
    {hasTooltip && } diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js index c79492de5c..d8d138d196 100644 --- a/components/lib/togglebutton/ToggleButtonBase.js +++ b/components/lib/togglebutton/ToggleButtonBase.js @@ -2,24 +2,47 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - label: 'p-button-label', - icon: ({ props, label }) => - classNames('p-button-icon p-c', { - 'p-button-icon-left': props.iconPos === 'left' && label, - 'p-button-icon-right': props.iconPos === 'right' && label - }), - root: ({ props, hasIcon, hasLabel }) => + root: ({ props }) => classNames( - 'p-button p-togglebutton p-component', + 'p-togglebutton p-component', { - 'p-button-icon-only': hasIcon && !hasLabel, + 'p-disabled': props.disabled, 'p-highlight': props.checked, - 'p-disabled': props.disabled + 'p-invalid': props.invalid }, props.className - ) + ), + input: 'p-togglebutton-input', + box: ({ hasIcon, hasLabel }) => + classNames('p-button p-component', { + 'p-button-icon-only': hasIcon && !hasLabel + }), + icon: ({ props, label }) => + classNames('p-button-icon', { + 'p-button-icon-left': props.iconPos === 'left' && label, + 'p-button-icon-right': props.iconPos === 'right' && label + }), + label: 'p-button-label' }; +const styles = ` +@layer primereact { + .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; + } +}`; + export const ToggleButtonBase = ComponentBase.extend({ defaultProps: { __TYPE: 'ToggleButton', @@ -41,6 +64,7 @@ export const ToggleButtonBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); diff --git a/components/lib/togglebutton/togglebutton.d.ts b/components/lib/togglebutton/togglebutton.d.ts index 319df0e36a..c4327b135e 100644 --- a/components/lib/togglebutton/togglebutton.d.ts +++ b/components/lib/togglebutton/togglebutton.d.ts @@ -50,6 +50,14 @@ export interface ToggleButtonPassThroughOptions { * @see {@link ComponentHooks} */ hooks?: ComponentHooks; + /** + * Uses to pass attributes to the input's DOM element. + */ + input?: RadioButtonPassThroughType>; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughType>; } /** * Custom toggle button change target options @@ -117,6 +125,21 @@ export interface ToggleButtonProps extends Omit Date: Tue, 5 Mar 2024 04:01:23 +0300 Subject: [PATCH 21/31] Tristatecheckbox structure update --- .../lib/tristatecheckbox/TriStateCheckbox.js | 47 +++++++++++-------- .../tristatecheckbox/TriStateCheckboxBase.js | 39 +++++++++++---- .../tristatecheckbox/tristatecheckbox.d.ts | 8 +++- 3 files changed, 64 insertions(+), 30 deletions(-) diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index b4abbdb6d4..6cda946be3 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -18,21 +18,16 @@ export const TriStateCheckbox = React.memo( const elementRef = React.useRef(null); const { ptm, cx, isUnstyled } = TriStateCheckboxBase.setMetaData({ - props, - state: { - focused: focusedState - } + props }); useHandleStyle(TriStateCheckboxBase.css.styles, isUnstyled, { name: 'tristatecheckbox' }); - const onClick = (event) => { - if (!props.disabled && !props.readOnly) { - toggle(event); + const onChange = (event) => { + if (props.disabled || props.readOnly) { + return; } - }; - const toggle = (event) => { let newValue; if (props.value === null || props.value === undefined) newValue = true; @@ -58,17 +53,17 @@ export const TriStateCheckbox = React.memo( } }; - const onFocus = () => { - setFocusedState(true); + const onFocus = (event) => { + props?.onFocus?.(event); }; - const onBlur = () => { - setFocusedState(false); + const onBlur = (event) => { + props?.onBlur?.(event); }; const onKeyDown = (e) => { if (e.code === 'Enter' || e.code === 'Space') { - toggle(e); + onChange(e); e.preventDefault(); } }; @@ -114,9 +109,9 @@ export const TriStateCheckbox = React.memo( const ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel'); const ariaChecked = props.value ? 'true' : 'false'; - const checkboxProps = mergeProps( + const boxProps = mergeProps( { - className: cx('checkbox', { focusedState }), + className: cx('box'), tabIndex: props.disabled ? '-1' : props.tabIndex, onFocus: onFocus, onBlur: onBlur, @@ -125,7 +120,7 @@ export const TriStateCheckbox = React.memo( 'aria-checked': ariaChecked, ...ariaProps }, - ptm('checkbox') + ptm('box') ); const srOnlyAriaProps = mergeProps( @@ -140,18 +135,30 @@ export const TriStateCheckbox = React.memo( { className: classNames(props.className, cx('root')), style: props.style, - onClick: onClick, 'data-p-disabled': props.disabled }, TriStateCheckboxBase.getOtherProps(props), ptm('root') ); + const inputProps = mergeProps({ + id: props.inputId, + className: cx('input'), + type: 'checkbox', + 'aria-invalid': props.invalid, + disabled: props.disabled, + readonly: props.readOnly, + value: props.value, + checked: props.value, + onChange: onChange + }); + return ( <>
    -
    {checkIcon}
    - {focusedState && {ariaValueLabel}} + + {ariaValueLabel} +
    {checkIcon}
    {hasTooltip && } diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js index 6fa33652ad..1863ae2d4c 100644 --- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js +++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js @@ -2,16 +2,38 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { ObjectUtils, classNames } from '../utils/Utils'; const classes = { - root: ({ props }) => classNames('p-tristatecheckbox p-checkbox p-component', { 'p-checkbox-disabled': props.disabled }), - checkIcon: 'p-checkbox-icon p-c', - checkbox: ({ props, focusedState }) => - classNames('p-checkbox-box', { - 'p-highlight': ObjectUtils.isNotEmpty(props.value), + root: ({ props }) => + classNames('p-tristatecheckbox p-checkbox p-component', { + 'p-highlight': props.value !== null, 'p-disabled': props.disabled, - 'p-focus': focusedState - }) + 'p-invalid': props.invalid, + 'p-variant-filled': props.variant === 'filled' + }), + checkIcon: 'p-checkbox-icon p-c', + box: 'p-checkbox-box', + input: 'p-checkbox-input' }; +const styles = ` +@layer primereact { + .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; + } +}`; + export const TriStateCheckboxBase = ComponentBase.extend({ defaultProps: { __TYPE: 'TriStateCheckbox', @@ -31,6 +53,7 @@ export const TriStateCheckboxBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts index f2f23fca01..c6e384b1ff 100644 --- a/components/lib/tristatecheckbox/tristatecheckbox.d.ts +++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts @@ -35,9 +35,13 @@ export interface TriStateCheckboxPassThroughOptions { */ root?: TriStateCheckboxPassThroughType>; /** - * Uses to pass attributes to the checkbox box's DOM element. + * Uses to pass attributes to the input's DOM element. */ - checkbox?: TriStateCheckboxPassThroughType>; + input?: CheckboxPassThroughType>; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughType>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} From c73f8c2b2707a76547286afd218379c6f462cc03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 5 Mar 2024 04:05:39 +0300 Subject: [PATCH 22/31] Updated structure of checkbox Checkbox styles update RadioButton structure update Checkbox default styles Radio button typo fix and api doc update Updated apidoc files InputSwitch structure update Removed unnecessary debugging lines Added readonly and invalid props ToggleButton structure update Tristatecheckbox structure update --- components/lib/checkbox/Checkbox.js | 139 ++++++++--------- components/lib/checkbox/CheckboxBase.js | 59 ++++--- components/lib/checkbox/checkbox.d.ts | 27 +--- components/lib/componentbase/ComponentBase.js | 87 ++++++----- components/lib/inputswitch/InputSwitch.js | 45 ++---- components/lib/inputswitch/InputSwitchBase.js | 28 +++- components/lib/inputswitch/inputswitch.d.ts | 8 +- components/lib/radiobutton/RadioButton.js | 144 +++++++++--------- components/lib/radiobutton/RadioButtonBase.js | 26 ++-- components/lib/radiobutton/radiobutton.d.ts | 39 ++--- components/lib/togglebutton/ToggleButton.js | 56 ++++--- .../lib/togglebutton/ToggleButtonBase.js | 48 ++++-- components/lib/togglebutton/togglebutton.d.ts | 23 +++ .../lib/tristatecheckbox/TriStateCheckbox.js | 47 +++--- .../tristatecheckbox/TriStateCheckboxBase.js | 39 ++++- .../tristatecheckbox/tristatecheckbox.d.ts | 8 +- 16 files changed, 441 insertions(+), 382 deletions(-) diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index cb818642b2..63a1d56e8d 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -12,32 +12,30 @@ export const Checkbox = React.memo( const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = CheckboxBase.getProps(inProps, context); - const [focusedState, setFocusedState] = React.useState(false); const { ptm, cx, isUnstyled } = CheckboxBase.setMetaData({ props, - state: { - focused: focusedState - }, context: { checked: props.checked === props.trueValue, disabled: props.disabled } }); - useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox', styled: true }); + useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox' }); + const elementRef = React.useRef(null); const inputRef = React.useRef(props.inputRef); - const onClick = (event) => { - if (props.disabled || props.readOnly) { + const isChecked = () => { + return props.checked === props.trueValue; + }; + + const onChange = (event) => { + if (props.disabled || props.readonly) { return; } - if (props.onChange || props.onClick) { + if (props.onChange) { const checked = isChecked(); - const checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object; - const isInputToggled = event.target === inputRef.current; - const isCheckboxToggled = checkboxClicked && event.target.checked !== checked; const value = checked ? props.falseValue : props.trueValue; const eventData = { originalEvent: event, @@ -58,39 +56,23 @@ export const Checkbox = React.memo( } }; - props.onClick && props.onClick(eventData); + props.onChange && props.onChange(eventData); // do not continue if the user defined click wants to prevent if (event.defaultPrevented) { return; } - if (isInputToggled || isCheckboxToggled) { - props.onChange && props.onChange(eventData); - } - DomHandler.focus(inputRef.current); - event.preventDefault(); } }; const onFocus = () => { - setFocusedState(true); + props?.onFocus?.(); }; const onBlur = () => { - setFocusedState(false); - }; - - const onKeyDown = (event) => { - if (event.code === 'Space' || event.key === ' ') { - // event.key is for Android support - onClick(event); - } - }; - - const isChecked = () => { - return props.checked === props.trueValue; + props?.onBlur?.(); }; React.useImperativeHandle(ref, () => ({ @@ -117,21 +99,11 @@ export const Checkbox = React.memo( const checked = isChecked(); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); const otherProps = CheckboxBase.getOtherProps(props); - const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); - const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') - ); - const icon = checked ? props.icon || : null; - const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked }); const rootProps = mergeProps( { id: props.id, - className: classNames(props.className, cx('root', { checked, focusedState })), + className: classNames(props.className, cx('root', { checked })), style: props.style, - onClick: (e) => onClick(e), 'data-p-highlight': checked, 'data-p-disabled': props.disabled, onContextMenu: props.onContextMenu, @@ -141,48 +113,59 @@ export const Checkbox = React.memo( ptm('root') ); - const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') - ); - - const hiddenInputProps = mergeProps( - { - id: props.inputId, - type: 'checkbox', - name: props.name, - tabIndex: props.tabIndex, - defaultChecked: checked, - onFocus: (e) => onFocus(e), - onBlur: (e) => onBlur(e), - onKeyDown: (e) => onKeyDown(e), - disabled: props.disabled, - readOnly: props.readOnly, - required: props.required, - ...ariaProps - }, - ptm('hiddenInput') - ); + const createInputElement = () => { + const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); + const inputProps = mergeProps( + { + id: props.inputId, + type: 'checkbox', + className: cx('input'), + name: props.name, + tabIndex: props.tabIndex, + defaultChecked: checked, + onFocus: (e) => onFocus(e), + onBlur: (e) => onBlur(e), + onChange: (e) => onChange(e), + disabled: props.disabled, + readOnly: props.readOnly, + required: props.required, + 'aria-invalid': props.invalid, + checked: isChecked(), + ...ariaProps + }, + ptm('input') + ); + + return ; + }; - const inputProps = mergeProps( - { - className: cx('input', { checked, focusedState }), - 'data-p-highlight': checked, - 'data-p-disabled': props.disabled, - 'data-p-focus': focusedState - }, - ptm('input') - ); + const createBoxElement = () => { + const iconProps = mergeProps( + { + className: cx('icon') + }, + ptm('icon') + ); + const boxProps = mergeProps( + { + className: cx('box', { checked }), + 'data-p-highlight': checked, + 'data-p-disabled': props.disabled + }, + ptm('box') + ); + + const icon = checked ? props.icon || : null; + const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked }); + + return
    {checkboxIcon}
    ; + }; return ( <>
    -
    - -
    -
    {checkboxIcon}
    + {createInputElement()} + {createBoxElement()}
    {hasTooltip && } diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js index 993a0ae489..e079f427e7 100644 --- a/components/lib/checkbox/CheckboxBase.js +++ b/components/lib/checkbox/CheckboxBase.js @@ -2,39 +2,48 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - icon: 'p-checkbox-icon p-c', - input: ({ props, checked, focusedState }) => - classNames('p-checkbox-box', { + box: 'p-checkbox-box', + input: 'p-checkbox-input', + icon: 'p-checkbox-icon', + root: ({ props, checked }) => + classNames('p-checkbox p-component', { 'p-highlight': checked, 'p-disabled': props.disabled, - 'p-focus': focusedState - }), - root: ({ props, checked, focusedState }) => - classNames('p-checkbox p-component', { - 'p-checkbox-checked': checked, - 'p-checkbox-disabled': props.disabled, - 'p-checkbox-focused': focusedState + 'p-invalid': props.invalid, + 'p-variant-filled': props.variant === 'filled' }) }; const styles = ` -.p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; -} +@layer primereact { + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } -.p-checkbox.p-checkbox-disabled { - cursor: auto; -} + .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-checkbox-box { - display: flex; - justify-content: center; - align-items: center; -} + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } +} `; export const CheckboxBase = ComponentBase.extend({ diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts index 80d64edd8d..8ddcb1f8df 100644 --- a/components/lib/checkbox/checkbox.d.ts +++ b/components/lib/checkbox/checkbox.d.ts @@ -39,6 +39,10 @@ export interface CheckboxPassThroughOptions { * Uses to pass attributes to the input's DOM element. */ input?: CheckboxPassThroughType>; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughType>; /** * Uses to pass attributes to the icon's DOM element. */ @@ -48,14 +52,6 @@ export interface CheckboxPassThroughOptions { * @type {TooltipPassThroughOptions} */ tooltip?: TooltipPassThroughOptions; - /** - * Uses to pass attributes to the hidden input wrapper's DOM element. - */ - hiddenInputWrapper?: CheckboxPassThroughType>; - /** - * Uses to pass attributes to the hidden input's DOM element. - */ - hiddenInput?: CheckboxPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} @@ -98,19 +94,11 @@ export interface CheckboxState { */ interface CheckboxChangeEvent extends FormEvent {} -/** - * Custom click event. - * @see {@link CheckboxProps.onClick} - * @extends {FormEvent } - * @event - */ -interface CheckboxClickEvent extends FormEvent {} - /** * Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface CheckboxProps extends Omit, HTMLDivElement>, 'onChange' | 'onClick' | 'ref'> { +export interface CheckboxProps extends Omit, HTMLDivElement>, 'onChange' | 'ref'> { /** * Unique identifier of the element. */ @@ -197,11 +185,6 @@ export interface CheckboxProps extends Omit} event - Browser event diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index 58b07cec28..c6d06cadc2 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -96,23 +96,33 @@ const buttonStyles = ` } `; const checkboxStyles = ` -.p-checkbox { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; - position: relative; -} + p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } -.p-checkbox.p-checkbox-disabled { - cursor: auto; -} + .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-checkbox-box { - display: flex; - justify-content: center; - align-items: center; -} + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } `; const inputTextStyles = ` .p-inputtext { @@ -223,32 +233,35 @@ const inputTextStyles = ` } `; const radioButtonStyles = ` -.p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; -} + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } -.p-radiobutton-box { - display: flex; - justify-content: center; - align-items: center; -} + .p-radiobutton-input { + cursor: pointer; + } -.p-radiobutton-icon { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - transform: translateZ(0) scale(.1); - border-radius: 50%; - visibility: hidden; -} + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } -.p-radiobutton-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1.0, 1.0); - visibility: visible; -} + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1.0, 1.0); + visibility: visible; + } `; const iconStyles = ` .p-icon { diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index b3a08239f6..fcc02ecc53 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -11,12 +11,8 @@ export const InputSwitch = React.memo( const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = InputSwitchBase.getProps(inProps, context); - const [focusedState, setFocusedState] = React.useState(false); const { ptm, cx, isUnstyled } = InputSwitchBase.setMetaData({ - props, - state: { - focused: focusedState - } + props }); useHandleStyle(InputSwitchBase.css.styles, isUnstyled, { name: 'inputswitch' }); @@ -24,18 +20,7 @@ export const InputSwitch = React.memo( const inputRef = React.useRef(props.inputRef); const checked = props.checked === props.trueValue; - const onClick = (event) => { - if (props.disabled) { - return; - } - - toggle(event); - DomHandler.focus(inputRef.current); - - event.preventDefault(); - }; - - const toggle = (event) => { + const onChange = (event) => { if (props.onChange) { const value = checked ? props.falseValue : props.trueValue; @@ -58,13 +43,11 @@ export const InputSwitch = React.memo( }; const onFocus = (event) => { - setFocusedState(true); - props.onFocus && props.onFocus(event); + props?.onFocus?.(event); }; const onBlur = (event) => { - setFocusedState(false); - props.onBlur && props.onBlur(event); + props?.onBlur?.(event); }; React.useImperativeHandle(ref, () => ({ @@ -90,9 +73,8 @@ export const InputSwitch = React.memo( const rootProps = mergeProps( { - className: classNames(props.className, cx('root', { focusedState, checked })), + className: classNames(props.className, cx('root', { checked })), style: props.style, - onClick, role: 'checkbox', 'aria-checked': checked, 'data-p-highlight': checked, @@ -101,29 +83,24 @@ export const InputSwitch = React.memo( otherProps, ptm('root') ); - const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') - ); - const hiddenInputProps = mergeProps( + const inputProps = mergeProps( { type: 'checkbox', id: props.inputId, name: props.name, checked: checked, - onChange: toggle, + onChange: onChange, onFocus: onFocus, onBlur: onBlur, disabled: props.disabled, role: 'switch', tabIndex: props.tabIndex, 'aria-checked': checked, + className: cx('input'), ...ariaProps }, - ptm('hiddenInput') + ptm('input') ); const sliderProps = mergeProps( @@ -136,9 +113,7 @@ export const InputSwitch = React.memo( return ( <>
    -
    - -
    +
    {hasTooltip && } diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js index 8227022d8b..d15ae89f77 100644 --- a/components/lib/inputswitch/InputSwitchBase.js +++ b/components/lib/inputswitch/InputSwitchBase.js @@ -2,12 +2,13 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props, focusedState, checked }) => + root: ({ props, checked }) => classNames('p-inputswitch p-component', { - 'p-inputswitch-checked': checked, + 'p-highlight': checked, 'p-disabled': props.disabled, - 'p-focus': focusedState + 'p-invalid': props.invalid }), + input: 'p-inputswitch-input', slider: 'p-inputswitch-slider' }; @@ -17,7 +18,22 @@ const styles = ` 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; @@ -27,10 +43,10 @@ const styles = ` bottom: 0; border: 1px solid transparent; } - + .p-inputswitch-slider:before { position: absolute; - content: ""; + content: ''; top: 50%; } } diff --git a/components/lib/inputswitch/inputswitch.d.ts b/components/lib/inputswitch/inputswitch.d.ts index a0d7a0cd44..56dd868f43 100644 --- a/components/lib/inputswitch/inputswitch.d.ts +++ b/components/lib/inputswitch/inputswitch.d.ts @@ -39,13 +39,9 @@ export interface InputSwitchPassThroughOptions { */ slider?: InputSwitchPassThroughType>; /** - * Uses to pass attributes to the hidden input wrapper's DOM element. + * Uses to pass attributes to the input's DOM element. */ - hiddenInputWrapper?: InputSwitchPassThroughType>; - /** - * Uses to pass attributes to the hidden input's DOM element. - */ - hiddenInput?: InputSwitchPassThroughType>; + input?: InputSwitchPassThroughType>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 5bba326b67..3b17e015b4 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -12,29 +12,25 @@ export const RadioButton = React.memo( const context = React.useContext(PrimeReactContext); const props = RadioButtonBase.getProps(inProps, context); - const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); const inputRef = React.useRef(props.inputRef); const { ptm, cx, isUnstyled } = RadioButtonBase.setMetaData({ - props, - state: { - focused: focusedState - } + props }); - useHandleStyle(RadioButtonBase.css.styles, isUnstyled, { name: 'radiobutton', styled: true }); + useHandleStyle(RadioButtonBase.css.styles, isUnstyled, { name: 'radiobutton' }); const select = (event) => { - onClick(event); + onChange(event); }; - const onClick = (event) => { - if (props.disabled) { + const onChange = (event) => { + if (props.disabled || props.readonly) { return; } - if (props.onChange || props.onClick) { + if (props.onChange) { const checked = props.checked; const radioClicked = event.target instanceof HTMLDivElement; const inputClicked = event.target === inputRef.current; @@ -61,7 +57,7 @@ export const RadioButton = React.memo( } }; - props.onClick && props.onClick(eventData); + props?.onChange?.(eventData); // do not continue if the user defined click wants to prevent if (event.defaultPrevented) { @@ -69,7 +65,7 @@ export const RadioButton = React.memo( } if (isInputToggled || isRadioToggled) { - props.onChange && props.onChange(eventData); + props?.onChange?.(eventData); if (isRadioToggled) { inputRef.current.checked = value; @@ -77,24 +73,24 @@ export const RadioButton = React.memo( } DomHandler.focus(inputRef.current); - event.preventDefault(); } }; - const onFocus = () => { - setFocusedState(true); + const onFocus = (event) => { + props?.onFocus?.(event); }; - const onBlur = () => { - setFocusedState(false); + const onBlur = (event) => { + props?.onBlur?.(event); }; - const onKeyDown = (event) => { - if (event.code === 'Space' || event.key === ' ') { - // event.key is for Android support - onClick(event); - } - }; + React.useImperativeHandle(ref, () => ({ + props, + select, + focus: () => DomHandler.focus(inputRef.current), + getElement: () => elementRef.current, + getInput: () => inputRef.current + })); React.useEffect(() => { if (inputRef.current) { @@ -112,75 +108,71 @@ export const RadioButton = React.memo( } }); - React.useImperativeHandle(ref, () => ({ - props, - select, - focus: () => DomHandler.focus(inputRef.current), - getElement: () => elementRef.current, - getInput: () => inputRef.current - })); - const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); const otherProps = RadioButtonBase.getOtherProps(props); - const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const rootProps = mergeProps( { - className: classNames(props.className, cx('root', { focusedState })), + id: props.id, + className: classNames(props.className, cx('root')), style: props.style, - onClick: onClick, 'data-p-checked': props.checked }, RadioButtonBase.getOtherProps(props), ptm('root') ); - const hiddenInputWrapperProps = mergeProps( - { - className: 'p-hidden-accessible' - }, - ptm('hiddenInputWrapper') - ); - - const hiddenInputProps = mergeProps( - { - type: 'radio', - name: props.name, - defaultChecked: props.checked, - onFocus: onFocus, - onBlur: onBlur, - onKeyDown: onKeyDown, - disabled: props.disabled, - required: props.required, - tabIndex: props.tabIndex, - ...ariaProps - }, - ptm('hiddenInput') - ); - - const inputProps = mergeProps( - { - className: cx('input', { focusedState }) - }, - ptm('input') - ); + const createInputElement = () => { + const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); + const inputProps = mergeProps( + { + id: props.inputId, + type: 'radio', + name: props.name, + defaultChecked: props.checked, + onFocus: onFocus, + onBlur: onBlur, + onChange: onChange, + disabled: props.disabled, + readonly: props.readonly, + required: props.required, + tabIndex: props.tabIndex, + className: cx('input'), + ...ariaProps + }, + ptm('input') + ); + + return ; + }; - const iconProps = mergeProps( - { - className: cx('icon') - }, - ptm('icon') - ); + const createBoxElement = () => { + const boxProps = mergeProps( + { + className: cx('box') + }, + ptm('box') + ); + + const iconProps = mergeProps( + { + className: cx('icon') + }, + ptm('icon') + ); + + return ( +
    +
    +
    + ); + }; return ( <> -
    -
    - -
    -
    -
    -
    +
    + {createInputElement()} + {createBoxElement()}
    {hasTooltip && } diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js index 5704c26fc6..d254e36472 100644 --- a/components/lib/radiobutton/RadioButtonBase.js +++ b/components/lib/radiobutton/RadioButtonBase.js @@ -2,36 +2,36 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props, focusedState }) => + root: ({ props }) => classNames('p-radiobutton p-component', { - 'p-radiobutton-checked': props.checked, - 'p-radiobutton-disabled': props.disabled, - 'p-radiobutton-focused': focusedState - }), - input: ({ props, focusedState }) => - classNames('p-radiobutton-box', { 'p-highlight': props.checked, 'p-disabled': props.disabled, - 'p-focus': focusedState + 'p-invalid': props.invalid }), + box: 'p-radiobutton-box', + input: 'p-radiobutton-input', icon: 'p-radiobutton-icon' }; const styles = ` @layer primereact { .p-radiobutton { + position: relative; display: inline-flex; - cursor: pointer; 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; @@ -39,8 +39,8 @@ const styles = ` border-radius: 50%; visibility: hidden; } - - .p-radiobutton-box.p-highlight .p-radiobutton-icon { + + .p-radiobutton.p-highlight .p-radiobutton-icon { transform: translateZ(0) scale(1.0, 1.0); visibility: visible; } diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts index bbb0700b54..46b102eb94 100644 --- a/components/lib/radiobutton/radiobutton.d.ts +++ b/components/lib/radiobutton/radiobutton.d.ts @@ -34,22 +34,18 @@ export interface RadioButtonPassThroughOptions { * Uses to pass attributes to the root's DOM element. */ root?: RadioButtonPassThroughType>; - /** - * Uses to pass attributes to the input's DOM element. - */ - input?: RadioButtonPassThroughType>; /** * Uses to pass attributes to the icon's DOM element. */ icon?: RadioButtonPassThroughType>; /** - * Uses to pass attributes to the hidden accessible DOM element wrapper. + * Uses to pass attributes to the input's DOM element. */ - hiddenInputWrapper?: RadioButtonPassThroughType>; + input?: RadioButtonPassThroughType>; /** - * Uses to pass attributes to the hidden accessible DOM element. + * Used to pass attributes to the box's DOM element. */ - hiddenInput?: RadioButtonPassThroughType>; + box?: CheckboxPassThroughType>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} @@ -81,19 +77,11 @@ export interface RadioButtonState { */ interface RadioButtonChangeEvent extends FormEvent {} -/** - * Custom click event. - * @see {@link RadioButtonProps.onClick} - * @extends {FormEvent} - * @event - */ -interface RadioButtonClickEvent extends FormEvent {} - /** * Defines valid properties in RadioButton component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ -export interface RadioButtonProps extends Omit, HTMLDivElement>, 'onChange' | 'onClick' | 'ref' | 'pt'> { +export interface RadioButtonProps extends Omit, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> { /** * When present, it specifies that the component should automatically get focus on load. * @defaultValue false @@ -121,10 +109,20 @@ export interface RadioButtonProps extends Omit { - if (!props.disabled && props.onChange) { + if (!props.disabled && props.onChange && !props.readonly) { props.onChange({ originalEvent: e, value: !props.checked, @@ -56,13 +52,11 @@ export const ToggleButton = React.memo( }; const onFocus = (event) => { - setFocusedState(true); - props.onFocus && props.onFocus(event); + props?.onFocus?.(event); }; const onBlur = (event) => { - setFocusedState(false); - props.onBlur && props.onBlur(event); + props?.onBlur?.(event); }; const createIcon = () => { @@ -108,27 +102,51 @@ export const ToggleButton = React.memo( ref: elementRef, id: props.id, className: cx('root', { hasIcon, hasLabel }), + 'data-p-highlight': props.checked, + 'data-p-disabled': props.disabled + }, + ToggleButtonBase.getOtherProps(props), + ptm('root') + ); + + const inputProps = mergeProps( + { + id: props.inputId, + className: cx('input'), style: props.style, - onClick: toggle, + onChange: toggle, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, tabIndex: tabIndex, - role: 'button', + role: 'switch', + type: 'checkbox', 'aria-pressed': props.checked, - 'data-p-highlight': props.checked, - 'data-p-disabled': props.disabled + 'aria-invalid': props.invalid, + disabled: props.disabled, + readonly: props.readonly, + value: props.checked, + checked: props.checked }, - ToggleButtonBase.getOtherProps(props), - ptm('root') + ptm('input') + ); + + const boxProps = mergeProps( + { + className: cx('box', { hasIcon, hasLabel }) + }, + ptm('box') ); return ( <>
    - {iconElement} - {label} - + +
    + {iconElement} + {label} + +
    {hasTooltip && } diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js index c79492de5c..d8d138d196 100644 --- a/components/lib/togglebutton/ToggleButtonBase.js +++ b/components/lib/togglebutton/ToggleButtonBase.js @@ -2,24 +2,47 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - label: 'p-button-label', - icon: ({ props, label }) => - classNames('p-button-icon p-c', { - 'p-button-icon-left': props.iconPos === 'left' && label, - 'p-button-icon-right': props.iconPos === 'right' && label - }), - root: ({ props, hasIcon, hasLabel }) => + root: ({ props }) => classNames( - 'p-button p-togglebutton p-component', + 'p-togglebutton p-component', { - 'p-button-icon-only': hasIcon && !hasLabel, + 'p-disabled': props.disabled, 'p-highlight': props.checked, - 'p-disabled': props.disabled + 'p-invalid': props.invalid }, props.className - ) + ), + input: 'p-togglebutton-input', + box: ({ hasIcon, hasLabel }) => + classNames('p-button p-component', { + 'p-button-icon-only': hasIcon && !hasLabel + }), + icon: ({ props, label }) => + classNames('p-button-icon', { + 'p-button-icon-left': props.iconPos === 'left' && label, + 'p-button-icon-right': props.iconPos === 'right' && label + }), + label: 'p-button-label' }; +const styles = ` +@layer primereact { + .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; + } +}`; + export const ToggleButtonBase = ComponentBase.extend({ defaultProps: { __TYPE: 'ToggleButton', @@ -41,6 +64,7 @@ export const ToggleButtonBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); diff --git a/components/lib/togglebutton/togglebutton.d.ts b/components/lib/togglebutton/togglebutton.d.ts index 319df0e36a..c4327b135e 100644 --- a/components/lib/togglebutton/togglebutton.d.ts +++ b/components/lib/togglebutton/togglebutton.d.ts @@ -50,6 +50,14 @@ export interface ToggleButtonPassThroughOptions { * @see {@link ComponentHooks} */ hooks?: ComponentHooks; + /** + * Uses to pass attributes to the input's DOM element. + */ + input?: RadioButtonPassThroughType>; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughType>; } /** * Custom toggle button change target options @@ -117,6 +125,21 @@ export interface ToggleButtonProps extends Omit { - if (!props.disabled && !props.readOnly) { - toggle(event); + const onChange = (event) => { + if (props.disabled || props.readOnly) { + return; } - }; - const toggle = (event) => { let newValue; if (props.value === null || props.value === undefined) newValue = true; @@ -58,17 +53,17 @@ export const TriStateCheckbox = React.memo( } }; - const onFocus = () => { - setFocusedState(true); + const onFocus = (event) => { + props?.onFocus?.(event); }; - const onBlur = () => { - setFocusedState(false); + const onBlur = (event) => { + props?.onBlur?.(event); }; const onKeyDown = (e) => { if (e.code === 'Enter' || e.code === 'Space') { - toggle(e); + onChange(e); e.preventDefault(); } }; @@ -114,9 +109,9 @@ export const TriStateCheckbox = React.memo( const ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel'); const ariaChecked = props.value ? 'true' : 'false'; - const checkboxProps = mergeProps( + const boxProps = mergeProps( { - className: cx('checkbox', { focusedState }), + className: cx('box'), tabIndex: props.disabled ? '-1' : props.tabIndex, onFocus: onFocus, onBlur: onBlur, @@ -125,7 +120,7 @@ export const TriStateCheckbox = React.memo( 'aria-checked': ariaChecked, ...ariaProps }, - ptm('checkbox') + ptm('box') ); const srOnlyAriaProps = mergeProps( @@ -140,18 +135,30 @@ export const TriStateCheckbox = React.memo( { className: classNames(props.className, cx('root')), style: props.style, - onClick: onClick, 'data-p-disabled': props.disabled }, TriStateCheckboxBase.getOtherProps(props), ptm('root') ); + const inputProps = mergeProps({ + id: props.inputId, + className: cx('input'), + type: 'checkbox', + 'aria-invalid': props.invalid, + disabled: props.disabled, + readonly: props.readOnly, + value: props.value, + checked: props.value, + onChange: onChange + }); + return ( <>
    -
    {checkIcon}
    - {focusedState && {ariaValueLabel}} + + {ariaValueLabel} +
    {checkIcon}
    {hasTooltip && } diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js index 6fa33652ad..1863ae2d4c 100644 --- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js +++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js @@ -2,16 +2,38 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { ObjectUtils, classNames } from '../utils/Utils'; const classes = { - root: ({ props }) => classNames('p-tristatecheckbox p-checkbox p-component', { 'p-checkbox-disabled': props.disabled }), - checkIcon: 'p-checkbox-icon p-c', - checkbox: ({ props, focusedState }) => - classNames('p-checkbox-box', { - 'p-highlight': ObjectUtils.isNotEmpty(props.value), + root: ({ props }) => + classNames('p-tristatecheckbox p-checkbox p-component', { + 'p-highlight': props.value !== null, 'p-disabled': props.disabled, - 'p-focus': focusedState - }) + 'p-invalid': props.invalid, + 'p-variant-filled': props.variant === 'filled' + }), + checkIcon: 'p-checkbox-icon p-c', + box: 'p-checkbox-box', + input: 'p-checkbox-input' }; +const styles = ` +@layer primereact { + .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; + } +}`; + export const TriStateCheckboxBase = ComponentBase.extend({ defaultProps: { __TYPE: 'TriStateCheckbox', @@ -31,6 +53,7 @@ export const TriStateCheckboxBase = ComponentBase.extend({ children: undefined }, css: { - classes + classes, + styles } }); diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts index f2f23fca01..c6e384b1ff 100644 --- a/components/lib/tristatecheckbox/tristatecheckbox.d.ts +++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts @@ -35,9 +35,13 @@ export interface TriStateCheckboxPassThroughOptions { */ root?: TriStateCheckboxPassThroughType>; /** - * Uses to pass attributes to the checkbox box's DOM element. + * Uses to pass attributes to the input's DOM element. */ - checkbox?: TriStateCheckboxPassThroughType>; + input?: CheckboxPassThroughType>; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughType>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} From da3412e04e2660b49c47f5c5a50611d9a43d608e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 5 Mar 2024 04:24:01 +0300 Subject: [PATCH 23/31] removed unused line --- components/lib/tristatecheckbox/TriStateCheckbox.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index 6cda946be3..c7dc31975b 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -14,7 +14,6 @@ export const TriStateCheckbox = React.memo( const context = React.useContext(PrimeReactContext); const props = TriStateCheckboxBase.getProps(inProps, context); - const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); const { ptm, cx, isUnstyled } = TriStateCheckboxBase.setMetaData({ From 2b705eb6266ca2c575ae4908baa1be388281a42a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Thu, 7 Mar 2024 16:52:02 +0300 Subject: [PATCH 24/31] Moved core stylings and updated themes --- components/lib/checkbox/CheckboxBase.js | 34 +- components/lib/componentbase/ComponentBase.js | 62 - components/lib/inputswitch/InputSwitchBase.js | 43 +- components/lib/radiobutton/RadioButtonBase.js | 37 +- .../lib/togglebutton/ToggleButtonBase.js | 21 +- .../tristatecheckbox/TriStateCheckboxBase.js | 25 +- public/themes/arya-blue/theme.css | 411 +++++- public/themes/arya-green/theme.css | 411 +++++- public/themes/arya-orange/theme.css | 411 +++++- public/themes/bootstrap4-dark-blue/theme.css | 453 ++++++- public/themes/bootstrap4-light-blue/theme.css | 453 ++++++- public/themes/fluent-light/theme.css | 405 +++++- public/themes/lara-dark-amber/theme.css | 459 ++++++- public/themes/lara-dark-blue/theme.css | 459 ++++++- public/themes/lara-dark-cyan/theme.css | 459 ++++++- public/themes/lara-dark-green/theme.css | 459 ++++++- public/themes/lara-dark-indigo/theme.css | 459 ++++++- public/themes/lara-dark-pink/theme.css | 459 ++++++- public/themes/lara-dark-teal/theme.css | 459 ++++++- public/themes/lara-light-amber/theme.css | 459 ++++++- public/themes/lara-light-blue/theme.css | 459 ++++++- public/themes/lara-light-cyan/theme.css | 459 ++++++- public/themes/lara-light-green/theme.css | 459 ++++++- public/themes/lara-light-indigo/theme.css | 459 ++++++- public/themes/lara-light-pink/theme.css | 459 ++++++- public/themes/lara-light-teal/theme.css | 459 ++++++- public/themes/luna-amber/theme.css | 411 +++++- public/themes/luna-blue/theme.css | 411 +++++- public/themes/luna-green/theme.css | 411 +++++- public/themes/luna-pink/theme.css | 411 +++++- public/themes/md-dark-deeppurple/theme.css | 1098 +++++++++++++---- public/themes/md-dark-indigo/theme.css | 755 +++++++++--- public/themes/md-light-deeppurple/theme.css | 852 +++++++++++-- public/themes/md-light-indigo/theme.css | 487 +++++++- public/themes/mdc-dark-deeppurple/theme.css | 1098 +++++++++++++---- public/themes/mdc-dark-indigo/theme.css | 755 +++++++++--- public/themes/mdc-light-deeppurple/theme.css | 852 +++++++++++-- public/themes/mdc-light-indigo/theme.css | 487 +++++++- public/themes/mira/theme.css | 411 +++++- public/themes/nano/theme.css | 411 +++++- public/themes/nova-accent/theme.css | 411 +++++- public/themes/nova-alt/theme.css | 411 +++++- public/themes/nova/theme.css | 411 +++++- public/themes/rhea/theme.css | 409 +++++- public/themes/saga-blue/theme.css | 411 +++++- public/themes/saga-green/theme.css | 411 +++++- public/themes/saga-orange/theme.css | 411 +++++- public/themes/soho-dark/theme.css | 501 ++++++-- public/themes/soho-light/theme.css | 459 ++++++- public/themes/tailwind-light/theme.css | 411 +++++- public/themes/vela-blue/theme.css | 411 +++++- public/themes/vela-green/theme.css | 411 +++++- public/themes/vela-orange/theme.css | 411 +++++- public/themes/viva-dark/theme.css | 459 ++++++- public/themes/viva-light/theme.css | 459 ++++++- 55 files changed, 20191 insertions(+), 4248 deletions(-) diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js index e079f427e7..1103da19af 100644 --- a/components/lib/checkbox/CheckboxBase.js +++ b/components/lib/checkbox/CheckboxBase.js @@ -14,37 +14,6 @@ const classes = { }) }; -const styles = ` -@layer primereact { - .p-checkbox { - position: relative; - display: inline-flex; - user-select: none; - vertical-align: bottom; - } - - .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-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } -} -`; export const CheckboxBase = ComponentBase.extend({ defaultProps: { @@ -74,7 +43,6 @@ export const CheckboxBase = ComponentBase.extend({ children: undefined }, css: { - classes, - styles + classes } }); diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index c6d06cadc2..a5edf8ecf5 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -95,35 +95,6 @@ const buttonStyles = ` z-index: 1; } `; -const checkboxStyles = ` - p-checkbox { - position: relative; - display: inline-flex; - user-select: none; - vertical-align: bottom; - } - - .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-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - } -`; const inputTextStyles = ` .p-inputtext { margin: 0; @@ -232,37 +203,6 @@ const inputTextStyles = ` width: 100%; } `; -const radioButtonStyles = ` - .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(.1); - border-radius: 50%; - visibility: hidden; - } - - .p-radiobutton.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1.0, 1.0); - visibility: visible; - } -`; const iconStyles = ` .p-icon { display: inline-block; @@ -469,9 +409,7 @@ const commonStyle = ` } ${buttonStyles} - ${checkboxStyles} ${inputTextStyles} - ${radioButtonStyles} ${iconStyles} } `; diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js index d15ae89f77..d4b1f3a415 100644 --- a/components/lib/inputswitch/InputSwitchBase.js +++ b/components/lib/inputswitch/InputSwitchBase.js @@ -12,46 +12,6 @@ const classes = { slider: 'p-inputswitch-slider' }; -const styles = ` -@layer primereact { - .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%; - } -} -`; - export const InputSwitchBase = ComponentBase.extend({ defaultProps: { __TYPE: 'InputSwitch', @@ -75,7 +35,6 @@ export const InputSwitchBase = ComponentBase.extend({ children: undefined }, css: { - classes, - styles + classes } }); diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js index d254e36472..52793a3681 100644 --- a/components/lib/radiobutton/RadioButtonBase.js +++ b/components/lib/radiobutton/RadioButtonBase.js @@ -13,40 +13,6 @@ const classes = { icon: 'p-radiobutton-icon' }; -const styles = ` -@layer primereact { - .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(.1); - border-radius: 50%; - visibility: hidden; - } - - .p-radiobutton.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1.0, 1.0); - visibility: visible; - } -} -`; - export const RadioButtonBase = ComponentBase.extend({ defaultProps: { __TYPE: 'RadioButton', @@ -69,7 +35,6 @@ export const RadioButtonBase = ComponentBase.extend({ children: undefined }, css: { - classes, - styles + classes } }); diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js index d8d138d196..18336e8954 100644 --- a/components/lib/togglebutton/ToggleButtonBase.js +++ b/components/lib/togglebutton/ToggleButtonBase.js @@ -25,24 +25,6 @@ const classes = { label: 'p-button-label' }; -const styles = ` -@layer primereact { - .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; - } -}`; - export const ToggleButtonBase = ComponentBase.extend({ defaultProps: { __TYPE: 'ToggleButton', @@ -64,7 +46,6 @@ export const ToggleButtonBase = ComponentBase.extend({ children: undefined }, css: { - classes, - styles + classes } }); diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js index 1863ae2d4c..782ea11074 100644 --- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js +++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js @@ -1,5 +1,5 @@ import { ComponentBase } from '../componentbase/ComponentBase'; -import { ObjectUtils, classNames } from '../utils/Utils'; +import { classNames } from '../utils/Utils'; const classes = { root: ({ props }) => @@ -14,26 +14,6 @@ const classes = { input: 'p-checkbox-input' }; -const styles = ` -@layer primereact { - .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; - } -}`; - export const TriStateCheckboxBase = ComponentBase.extend({ defaultProps: { __TYPE: 'TriStateCheckbox', @@ -53,7 +33,6 @@ export const TriStateCheckboxBase = ComponentBase.extend({ children: undefined }, css: { - classes, - styles + classes } }); diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index f4d0f37f2b..c375c85e1f 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -733,6 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #2396f2; background: #2396f2; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #64b5f6; - } - .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 #93cbf9; border-color: #64b5f6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #2396f2; - background: #2396f2; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #64b5f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2396f2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #64b5f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2396f2; + } + .p-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: #64b5f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #2396f2; } .p-chips { @@ -1146,14 +1228,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); @@ -1164,27 +1282,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 #93cbf9; - } - .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: #64b5f6; } - .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: #43a5f4; } - .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 #93cbf9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #64b5f6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64b5f6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #2396f2; background: #2396f2; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; } .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: #64b5f6; + } + .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: #2396f2; + } + .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: #64b5f6; } - .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: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -1950,44 +2135,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: #64b5f6; border-color: #64b5f6; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #43a5f4; border-color: #43a5f4; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #93cbf9; + border-color: #64b5f6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #64b5f6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #64b5f6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index ba69e82390..e20c2bafd6 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -733,6 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #54b358; background: #54b358; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81c784; - } - .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 #a7d8a9; border-color: #81c784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #54b358; - background: #54b358; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81c784; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #54b358; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #81c784; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #54b358; + } + .p-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: #81c784; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #54b358; } .p-chips { @@ -1146,14 +1228,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); @@ -1164,27 +1282,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 #a7d8a9; - } - .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: #81c784; } - .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: #6abd6e; } - .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 #a7d8a9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #81c784; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81c784; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #54b358; background: #54b358; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; } .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: #81c784; + } + .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: #54b358; + } + .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: #81c784; } - .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: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -1950,44 +2135,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: #81c784; border-color: #81c784; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #6abd6e; border-color: #6abd6e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #a7d8a9; + border-color: #81c784; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81c784; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #81c784; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index e591e7aa8d..7773af6477 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -733,6 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ffc50c; background: #ffc50c; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffd54f; - } - .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 #ffe284; border-color: #ffd54f; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffc50c; - background: #ffc50c; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffd54f; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffc50c; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #ffd54f; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffc50c; + } + .p-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: #ffd54f; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #ffc50c; } .p-chips { @@ -1146,14 +1228,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); @@ -1164,27 +1282,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 #ffe284; - } - .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: #ffd54f; } - .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: #ffcd2e; } - .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 #ffe284; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #ffd54f; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #ffd54f; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ffc50c; background: #ffc50c; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; } .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: #ffd54f; + } + .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: #ffc50c; + } + .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: #ffd54f; } - .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: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -1950,44 +2135,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: #ffd54f; border-color: #ffd54f; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #ffcd2e; border-color: #ffcd2e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #ffe284; + border-color: #ffd54f; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffd54f; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffd54f; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 8e73324138..e48a24f07b 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -722,8 +722,56 @@ background-color: #3f4b5b; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #3f4b5b; + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #3f4b5b; + background: #20262e; width: 20px; height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.15s; + color: #151515; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #3f4b5b; @@ -733,6 +781,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -743,47 +792,80 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #8dd0ff; background: #8dd0ff; } - .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: #3f4b5b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #1dadff; background: #1dadff; color: #151515; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #3f4b5b; - } - .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 #e3f3fe; border-color: #8dd0ff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #1dadff; - background: #1dadff; - color: #151515; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f19ea6; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #8dd0ff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1dadff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3f4b5b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #8dd0ff; } - .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: #3f4b5b; } - .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: #1dadff; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } + .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: #3f4b5b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #8dd0ff; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3f4b5b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1dadff; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .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: 4px; + } .p-inputswitch .p-inputswitch-slider { background: #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1167,27 +1285,25 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #8dd0ff; } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #151515; + transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #3f4b5b; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #8dd0ff; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #151515; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #8dd0ff; + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f19ea6; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #9fdaa8; } + .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: 1px solid #3f4b5b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #3f4b5b; background: #20262e; @@ -1685,15 +1841,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3f4b5b; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - border-color: #8dd0ff; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.15s; background-color: #151515; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #8dd0ff; background: #8dd0ff; } - .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: #3f4b5b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #1dadff; background: #1dadff; - color: #151515; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #151515; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f19ea6; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #3f4b5b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #8dd0ff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #3f4b5b; } - .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: #1dadff; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3f4b5b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #8dd0ff; } - .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: #3f4b5b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #1dadff; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } - .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 #6c757d; + border-radius: 4px; + } + .p-togglebutton .p-button { background: #6c757d; border: 1px solid #6c757d; color: #ffffff; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; + .p-togglebutton.p-highlight .p-button { + background: #545b62; + border-color: #4e555b; color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-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 { - background: #545b62; - border-color: #4e555b; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #5a6268; + border-color: #545b62; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #545b62; border-color: #4e555b; 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 #e3f3fe; + border-color: #8dd0ff; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f19ea6; } .p-button { @@ -2446,6 +2665,54 @@ border-color: transparent; color: #f19ea6; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #20262e; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d2d4d5; + color: #20262e; + border-color: #d2d4d5; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #bcbec0; + color: #20262e; + border-color: #bcbec0; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #8dd0ff; background: transparent; @@ -6223,6 +6490,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-metergroup .p-metergroup-meter-container { + background: #3f4b5b; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #8dd0ff; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #8dd0ff; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index b8d33e02c2..67294f0743 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -721,10 +721,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #efefef; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #ced4da; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -733,6 +762,7 @@ color: #212529; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -743,47 +773,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #ced4da; + background: #ffffff; + width: 20px; + height: 20px; + color: #212529; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.15s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007bff; background: #007bff; } - .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: #ced4da; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0062cc; background: #0062cc; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ced4da; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0062cc; - background: #0062cc; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #dc3545; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007bff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #efefef; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0062cc; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #efefef; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007bff; } - .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: #efefef; } - .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: #0062cc; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + .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: #efefef; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007bff; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #efefef; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0062cc; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .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: 4px; + } .p-inputswitch .p-inputswitch-slider { background: #ced4da; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1167,27 +1285,25 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #007bff; } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #ced4da; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #007bff; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #007bff; + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #dc3545; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #28a745; } + .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; @@ -1685,15 +1841,7 @@ color: #212529; border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ced4da; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - border-color: #007bff; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.15s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007bff; background: #007bff; } - .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: #ced4da; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0062cc; background: #0062cc; - 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 rgba(38, 143, 255, 0.5); + border-color: #007bff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #dc3545; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #efefef; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007bff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #efefef; } - .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: #0062cc; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #efefef; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007bff; } - .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: #efefef; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0062cc; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #efefef; } - .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 #6c757d; + border-radius: 4px; + } + .p-togglebutton .p-button { background: #6c757d; border: 1px solid #6c757d; color: #ffffff; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; + .p-togglebutton.p-highlight .p-button { + background: #545b62; + border-color: #4e555b; color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-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 { - background: #545b62; - border-color: #4e555b; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #5a6268; + border-color: #545b62; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #545b62; border-color: #4e555b; 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 rgba(38, 143, 255, 0.5); + border-color: #007bff; + } + .p-togglebutton.p-invalid > .p-button { border-color: #dc3545; } .p-button { @@ -2446,6 +2665,54 @@ border-color: transparent; color: #dc3545; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212529; + border: 1px solid #212529; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #343a40; + color: #ffffff; + border-color: #343a40; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #495057; + color: #ffffff; + border-color: #495057; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212529; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + border-color: transparent; + color: #212529; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + border-color: transparent; + color: #212529; + } .p-button.p-button-link { color: #007bff; background: transparent; @@ -6223,6 +6490,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-metergroup .p-metergroup-meter-container { + background: #e9ecef; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007bff; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007bff; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 7809f02929..e76f218683 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -721,10 +721,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #605e5c; + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border: 1px solid #605e5c; background: #ffffff; @@ -733,6 +762,7 @@ color: #323130; border-radius: 2px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,42 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #605e5c; + background: #ffffff; + width: 20px; + height: 20px; + color: #323130; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #0078d4; background: #0078d4; } - .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: #323130; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005a9e; background: #005a9e; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #323130; - } - .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: inset 0 0 0 1px #605e5c; border-color: #0078d4; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005a9e; - background: #005a9e; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a4252c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #faf9f8; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #0078d4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #faf9f8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005a9e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #faf9f8; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #0078d4; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #faf9f8; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005a9e; + } + .p-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: #faf9f8; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #0078d4; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #faf9f8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #005a9e; } .p-chips { @@ -1146,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } + .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: #ffffff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #605e5c; @@ -1164,27 +1282,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: inset 0 0 0 1px #605e5c; + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #0078d4; } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #0078d4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #ffffff; } - .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: #005a9e; } - .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: inset 0 0 0 1px #605e5c; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a4252c; } .p-inputtext { @@ -1670,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #498205; } + .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: 1px solid #605e5c; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #605e5c; background: #ffffff; @@ -1682,15 +1838,7 @@ color: #323130; 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: #323130; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - border-color: #0078d4; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #0078d4; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #0078d4; background: #ffffff; } - .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: #323130; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005a9e; background: #ffffff; - color: #005a9e; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #005a9e; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a4252c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #faf9f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #faf9f8; } - .p-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: #ffffff; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #faf9f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffffff; } - .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: #faf9f8; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #323130; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #a4252c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -1950,44 +2135,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } - .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 #605e5c; + border-radius: 2px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #605e5c; color: #323130; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #605e5c; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f2f1; + .p-togglebutton.p-highlight .p-button { + background: #edebe9; border-color: #605e5c; color: #323130; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #605e5c; + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #323130; } - .p-togglebutton.p-button.p-highlight { - background: #edebe9; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f2f1; border-color: #605e5c; color: #323130; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #323130; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #605e5c; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #edebe9; border-color: #605e5c; color: #323130; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #323130; } - .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: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a4252c; } .p-button { @@ -6165,6 +6384,64 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-metergroup .p-metergroup-meter-container { + background: #edebe9; + border-radius: 2px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #0078d4; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 2px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #0078d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 2px; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 03f46db27a..48b9d0134d 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +779,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +790,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #fbbf24; background: #fbbf24; } - .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: #fbbf24; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #fde68a; background: #fde68a; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #fbbf24; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #fde68a; - background: #fde68a; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #fbbf24; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fde68a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #fbbf24; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fde68a; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #fbbf24; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #fde68a; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1181,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #fbbf24; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #fcd34d; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1699,15 +1855,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: #fbbf24; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); - border-color: #fbbf24; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #fbbf24; background: #fbbf24; } - .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: #fbbf24; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #fde68a; background: #fde68a; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #fbbf24; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #fde68a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #fbbf24; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #fde68a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); @@ -1967,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #fbbf24; border-color: #fbbf24; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #fcd34d; border-color: #fcd34d; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #fbbf24; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #fbbf24; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #fbbf24; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index ef8586f593..7df0f72dc6 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +779,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +790,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #60a5fa; background: #60a5fa; } - .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: #60a5fa; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #bfdbfe; background: #bfdbfe; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #60a5fa; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #bfdbfe; - background: #bfdbfe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #60a5fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #bfdbfe; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #60a5fa; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #bfdbfe; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #60a5fa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #bfdbfe; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1181,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #60a5fa; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #93c5fd; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1699,15 +1855,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: #60a5fa; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); - border-color: #60a5fa; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #60a5fa; background: #60a5fa; } - .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: #60a5fa; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #bfdbfe; background: #bfdbfe; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #60a5fa; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #bfdbfe; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #60a5fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #bfdbfe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -1967,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #60a5fa; border-color: #60a5fa; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #93c5fd; border-color: #93c5fd; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #60a5fa; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #60a5fa; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #60a5fa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index ebb8d6400b..6db191bef9 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +779,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +790,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #22d3ee; background: #22d3ee; } - .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: #22d3ee; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a5f3fc; background: #a5f3fc; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #22d3ee; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a5f3fc; - background: #a5f3fc; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #22d3ee; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a5f3fc; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #22d3ee; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a5f3fc; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #22d3ee; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a5f3fc; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1181,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #22d3ee; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #67e8f9; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1699,15 +1855,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: #22d3ee; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); - border-color: #22d3ee; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #22d3ee; background: #22d3ee; } - .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: #22d3ee; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a5f3fc; background: #a5f3fc; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #22d3ee; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a5f3fc; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #22d3ee; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a5f3fc; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); @@ -1967,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #22d3ee; border-color: #22d3ee; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #67e8f9; border-color: #67e8f9; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #22d3ee; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #22d3ee; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #22d3ee; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 710ca089f2..f5bcae8f46 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +779,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +790,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #34d399; background: #34d399; } - .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: #34d399; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a7f3d0; background: #a7f3d0; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #34d399; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a7f3d0; - background: #a7f3d0; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #34d399; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a7f3d0; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #34d399; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a7f3d0; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #34d399; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a7f3d0; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1181,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #34d399; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #6ee7b7; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1699,15 +1855,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: #34d399; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); - border-color: #34d399; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #34d399; background: #34d399; } - .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: #34d399; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a7f3d0; background: #a7f3d0; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #34d399; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a7f3d0; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #34d399; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a7f3d0; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); @@ -1967,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #34d399; border-color: #34d399; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #6ee7b7; border-color: #6ee7b7; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #34d399; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #34d399; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #34d399; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 8775095ca4..19f6e81946 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +779,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +790,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #818cf8; background: #818cf8; } - .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: #818cf8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #c7d2fe; background: #c7d2fe; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #818cf8; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #c7d2fe; - background: #c7d2fe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #818cf8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #c7d2fe; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #818cf8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #c7d2fe; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #818cf8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #c7d2fe; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1181,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #818cf8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #a5b4fc; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1699,15 +1855,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: #818cf8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); - border-color: #818cf8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #818cf8; background: #818cf8; } - .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: #818cf8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #c7d2fe; background: #c7d2fe; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #818cf8; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #c7d2fe; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #818cf8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #c7d2fe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -1967,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #818cf8; border-color: #818cf8; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #a5b4fc; border-color: #a5b4fc; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #818cf8; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #818cf8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #818cf8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index d19ccaa6b9..d39ed66f36 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +779,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +790,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #f472b6; background: #f472b6; } - .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: #f472b6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #fbcfe8; background: #fbcfe8; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #f472b6; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #fbcfe8; - background: #fbcfe8; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f472b6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fbcfe8; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #f472b6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fbcfe8; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f472b6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #fbcfe8; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1181,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #f472b6; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #f9a8d4; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1699,15 +1855,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: #f472b6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); - border-color: #f472b6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #f472b6; background: #f472b6; } - .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: #f472b6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #fbcfe8; background: #fbcfe8; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #f472b6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #fbcfe8; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #f472b6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #fbcfe8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); @@ -1967,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #f472b6; border-color: #f472b6; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #f9a8d4; border-color: #f9a8d4; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #f472b6; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f472b6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #f472b6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index dc7162cce9..57df1cba15 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +779,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +790,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #2dd4bf; background: #2dd4bf; } - .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: #2dd4bf; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #99f6e4; background: #99f6e4; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #2dd4bf; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #99f6e4; - background: #99f6e4; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #2dd4bf; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #99f6e4; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #2dd4bf; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #99f6e4; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #2dd4bf; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #99f6e4; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1181,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #2dd4bf; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #5eead4; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1699,15 +1855,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: #2dd4bf; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); - border-color: #2dd4bf; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #2dd4bf; background: #2dd4bf; } - .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: #2dd4bf; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #99f6e4; background: #99f6e4; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #2dd4bf; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #99f6e4; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #2dd4bf; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #99f6e4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -1967,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #2dd4bf; border-color: #2dd4bf; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #5eead4; border-color: #5eead4; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #2dd4bf; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #2dd4bf; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #2dd4bf; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index cf8d173f99..5eeaf852c6 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -739,8 +739,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; width: 22px; height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; @@ -750,6 +798,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +809,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #f59e0b; background: #f59e0b; } - .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: #f59e0b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #b45309; background: #b45309; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #f59e0b; - } - .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 #fef08a; border-color: #f59e0b; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #b45309; - background: #b45309; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f59e0b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #b45309; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #f59e0b; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #b45309; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #f59e0b; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #b45309; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1181,27 +1299,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 #fef08a; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #f59e0b; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #d97706; } - .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 #fef08a; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1699,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #f59e0b; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #fef08a; - border-color: #f59e0b; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #f59e0b; background: #f59e0b; } - .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: #f59e0b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #b45309; background: #b45309; - 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 #fef08a; + border-color: #f59e0b; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #f59e0b; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #b45309; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #f59e0b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #b45309; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; @@ -1967,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #f59e0b; border-color: #f59e0b; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d97706; border-color: #d97706; 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 #fef08a; + border-color: #f59e0b; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #b45309; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f59e0b; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #f59e0b; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 2c9e24fe47..c7bcabc7c0 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -739,8 +739,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; width: 22px; height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; @@ -750,6 +798,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +809,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3b82f6; background: #3b82f6; } - .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: #3b82f6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #1d4ed8; background: #1d4ed8; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #3b82f6; - } - .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 #bfdbfe; border-color: #3b82f6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #1d4ed8; - background: #1d4ed8; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3b82f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1d4ed8; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #3b82f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1d4ed8; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #3b82f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #1d4ed8; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1181,27 +1299,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 #bfdbfe; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #3b82f6; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #2563eb; } - .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 #bfdbfe; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1699,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3b82f6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #bfdbfe; - border-color: #3b82f6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3b82f6; background: #3b82f6; } - .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: #3b82f6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #1d4ed8; background: #1d4ed8; - 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 #bfdbfe; + border-color: #3b82f6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #3b82f6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #1d4ed8; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #3b82f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #1d4ed8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; @@ -1967,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #2563eb; border-color: #2563eb; 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 #bfdbfe; + border-color: #3b82f6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #1d4ed8; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3b82f6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #3b82f6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 16dd45a914..1b2efb2b80 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -739,8 +739,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; width: 22px; height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; @@ -750,6 +798,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +809,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #06b6d4; background: #06b6d4; } - .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: #06b6d4; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0e7490; background: #0e7490; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #06b6d4; - } - .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 #a5f3fc; border-color: #06b6d4; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0e7490; - background: #0e7490; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #06b6d4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e7490; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #06b6d4; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e7490; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #06b6d4; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #0e7490; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1181,27 +1299,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 #a5f3fc; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #06b6d4; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #0891b2; } - .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 #a5f3fc; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1699,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #06b6d4; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a5f3fc; - border-color: #06b6d4; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #06b6d4; background: #06b6d4; } - .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: #06b6d4; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0e7490; background: #0e7490; - 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 #a5f3fc; + border-color: #06b6d4; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #06b6d4; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #0e7490; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #06b6d4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0e7490; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; @@ -1967,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #06b6d4; border-color: #06b6d4; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #0891b2; border-color: #0891b2; 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 #a5f3fc; + border-color: #06b6d4; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #0e7490; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #06b6d4; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #06b6d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 425562dead..9282649b6e 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -739,8 +739,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; width: 22px; height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; @@ -750,6 +798,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +809,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #10b981; background: #10b981; } - .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: #10b981; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #047857; background: #047857; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #10b981; - } - .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 #a7f3d0; border-color: #10b981; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #047857; - background: #047857; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #10b981; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #047857; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #10b981; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #047857; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #10b981; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #047857; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1181,27 +1299,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 #a7f3d0; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #10b981; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #059669; } - .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 #a7f3d0; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1699,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #10b981; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #10b981; background: #10b981; } - .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: #10b981; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #047857; background: #047857; - 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 #a7f3d0; + border-color: #10b981; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #10b981; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #047857; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #10b981; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #047857; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; @@ -1967,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #10b981; border-color: #10b981; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #059669; border-color: #059669; 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 #a7f3d0; + border-color: #10b981; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #047857; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #10b981; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #10b981; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 429a4e4ad7..f2870591cb 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -739,8 +739,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; width: 22px; height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; @@ -750,6 +798,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +809,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #6366f1; background: #6366f1; } - .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: #6366f1; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #4338ca; background: #4338ca; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #6366f1; - } - .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 #c7d2fe; border-color: #6366f1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #4338ca; - background: #4338ca; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #6366f1; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #4338ca; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #6366f1; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #4338ca; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #6366f1; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #4338ca; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1181,27 +1299,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 #c7d2fe; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #6366f1; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #4f46e5; } - .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 #c7d2fe; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1699,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #6366f1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #c7d2fe; - border-color: #6366f1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #6366f1; background: #6366f1; } - .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: #6366f1; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #4338ca; background: #4338ca; - 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 #c7d2fe; + border-color: #6366f1; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #6366f1; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #4338ca; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #6366f1; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #4338ca; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; @@ -1967,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #6366f1; border-color: #6366f1; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #4f46e5; border-color: #4f46e5; 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 #c7d2fe; + border-color: #6366f1; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #4338ca; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #6366f1; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #6366f1; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index e05e707fea..8f49a0ac0a 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -739,8 +739,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; width: 22px; height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; @@ -750,6 +798,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +809,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ec4899; background: #ec4899; } - .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: #ec4899; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #be185d; background: #be185d; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ec4899; - } - .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 #fbcfe8; border-color: #ec4899; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #be185d; - background: #be185d; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ec4899; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #be185d; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #ec4899; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #be185d; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #ec4899; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #be185d; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1181,27 +1299,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 #fbcfe8; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ec4899; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #db2777; } - .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 #fbcfe8; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1699,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ec4899; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #fbcfe8; - border-color: #ec4899; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ec4899; background: #ec4899; } - .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: #ec4899; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #be185d; background: #be185d; - 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 #fbcfe8; + border-color: #ec4899; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ec4899; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #be185d; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ec4899; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #be185d; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; @@ -1967,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ec4899; border-color: #ec4899; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #db2777; border-color: #db2777; 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 #fbcfe8; + border-color: #ec4899; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #be185d; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ec4899; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ec4899; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 533d8231f8..f9074bab75 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -739,8 +739,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; width: 22px; height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; @@ -750,6 +798,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,42 +809,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #14b8a6; background: #14b8a6; } - .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: #14b8a6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0f766e; background: #0f766e; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #14b8a6; - } - .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 #99f6e4; border-color: #14b8a6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0f766e; - background: #0f766e; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #14b8a6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0f766e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #14b8a6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0f766e; + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #14b8a6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #0f766e; } .p-chips { @@ -1163,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1181,27 +1299,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 #99f6e4; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #14b8a6; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #0d9488; } - .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 #99f6e4; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1687,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1699,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #14b8a6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99f6e4; - border-color: #14b8a6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1715,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #14b8a6; background: #14b8a6; } - .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: #14b8a6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0f766e; background: #0f766e; - 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 #99f6e4; + border-color: #14b8a6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #14b8a6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #0f766e; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #14b8a6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0f766e; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1757,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -1967,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #14b8a6; border-color: #14b8a6; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #0d9488; border-color: #0d9488; 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 #99f6e4; + border-color: #14b8a6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2454,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #0f766e; background: transparent; @@ -6182,6 +6449,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #14b8a6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #14b8a6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 985671cf93..01ddf4e0a1 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,47 +792,80 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffe082; background: #ffe082; } - .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: #ffe082; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ffca28; background: #ffca28; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffe082; - } - .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.1rem white; border-color: #ffe082; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffca28; - background: #ffca28; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffe082; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffca28; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ffe082; } - .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: #4b4b4b; } - .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: #ffca28; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + .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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffe082; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffca28; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1167,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ffe082; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; } - .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: #ffd54f; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1685,15 +1841,7 @@ color: #dedede; 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: #ffe082; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #ffe082; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffe082; background: #ffe082; } - .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: #ffe082; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ffca28; background: #ffca28; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #ffe082; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffe082; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #ffca28; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffe082; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffca28; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ffe082; border-color: #ffe082; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #ffd54f; border-color: #ffd54f; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #ffe082; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6174,6 +6393,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffe082; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffe082; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index e939b06272..62ac651699 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,47 +792,80 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81d4fa; background: #81d4fa; } - .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: #81d4fa; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #29b6f6; background: #29b6f6; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81d4fa; - } - .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.1rem white; border-color: #81d4fa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #29b6f6; - background: #29b6f6; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81d4fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #29b6f6; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #81d4fa; } - .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: #4b4b4b; } - .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: #29b6f6; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + .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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81d4fa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #29b6f6; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1167,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #81d4fa; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; } - .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: #4fc3f7; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1685,15 +1841,7 @@ color: #dedede; 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: #81d4fa; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #81d4fa; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81d4fa; background: #81d4fa; } - .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: #81d4fa; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #29b6f6; background: #29b6f6; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81d4fa; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #81d4fa; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #29b6f6; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #81d4fa; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #29b6f6; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #81d4fa; border-color: #81d4fa; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #4fc3f7; border-color: #4fc3f7; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #81d4fa; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6174,6 +6393,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81d4fa; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #81d4fa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 67a5a9ec32..c0533f7d1d 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,47 +792,80 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #c5e1a5; background: #c5e1a5; } - .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: #c5e1a5; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9ccc65; background: #9ccc65; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #c5e1a5; - } - .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.1rem white; border-color: #c5e1a5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9ccc65; - background: #9ccc65; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #c5e1a5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9ccc65; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #c5e1a5; } - .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: #4b4b4b; } - .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: #9ccc65; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + .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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #c5e1a5; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9ccc65; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1167,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #c5e1a5; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; } - .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: #aed581; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1685,15 +1841,7 @@ color: #dedede; 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: #c5e1a5; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #c5e1a5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #c5e1a5; background: #c5e1a5; } - .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: #c5e1a5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9ccc65; background: #9ccc65; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #c5e1a5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #c5e1a5; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #9ccc65; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #c5e1a5; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #9ccc65; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #c5e1a5; border-color: #c5e1a5; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #aed581; border-color: #aed581; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #c5e1a5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6174,6 +6393,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #c5e1a5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #c5e1a5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 37758d2db3..bcb6374466 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; background: #191919; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,47 +792,80 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #f48fb1; background: #f48fb1; } - .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: #f48fb1; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ec407a; background: #ec407a; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #f48fb1; - } - .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.1rem white; border-color: #f48fb1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ec407a; - background: #ec407a; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f48fb1; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ec407a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #f48fb1; } - .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: #4b4b4b; } - .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: #ec407a; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + .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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f48fb1; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ec407a; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1167,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #f48fb1; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; } - .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: #f06292; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1685,15 +1841,7 @@ color: #dedede; 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: #f48fb1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #f48fb1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #f48fb1; background: #f48fb1; } - .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: #f48fb1; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ec407a; background: #ec407a; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #f48fb1; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #f48fb1; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #ec407a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #f48fb1; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ec407a; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #f48fb1; border-color: #f48fb1; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #f06292; border-color: #f06292; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #f48fb1; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { @@ -6174,6 +6393,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #f48fb1; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #f48fb1; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 7212b2f9ee..1277e7ab4a 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-left: 1px solid hsla(0, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,26 +733,75 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; width: 18px; height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #CE93D8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #CE93D8; - background: #CE93D8; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #CE93D8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-checkbox:not(.p-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: #CE93D8; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } - .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: none; border-color: #CE93D8; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(206, 147, 216, 0.16); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: hsla(0, 0%, 100%, 0.24); + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #CE93D8; } + .p-dropdown.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -878,7 +1094,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; } @@ -905,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -920,13 +1136,6 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,13 +1148,27 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -959,29 +1182,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-top: 1px solid hsla(0, 0%, 100%, 0.3); + border-left: 1px solid hsla(0, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-right: 1px solid hsla(0, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #CE93D8; + transform: translateX(1.5rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: hsla(0, 0%, 100%, 0.3); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.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: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1085,7 +1330,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1152,13 +1397,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1168,15 +1413,44 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1222,9 +1498,26 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-listbox.p-invalid { border-color: #f44435; @@ -1250,17 +1543,106 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #CE93D8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1284,7 +1672,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1323,16 +1701,13 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1340,7 +1715,11 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -1371,18 +1750,22 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { - color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1399,15 +1782,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1432,27 +1806,59 @@ .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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,31 +1866,51 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; - color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } - .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: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } .p-rating { @@ -1574,7 +2000,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1614,7 +2040,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1640,7 +2066,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1670,7 +2096,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1721,52 +2147,86 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); + } + .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-button { + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #CE93D8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2216,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -3038,7 +3546,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3046,12 +3554,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3060,7 +3568,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3124,12 +3632,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3142,10 +3650,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3309,12 +3817,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3387,11 +3895,11 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3803,7 +4311,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0deg, 0%, 100%, 0.12); + border-top: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3813,7 +4321,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0deg, 0%, 100%, 0.12); + border-left: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -3875,10 +4383,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3886,7 +4394,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4301,7 +4809,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4322,7 +4830,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4464,7 +4972,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4504,7 +5012,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4565,7 +5073,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -4615,7 +5123,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4702,7 +5210,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4737,7 +5245,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -4817,7 +5325,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4845,7 +5353,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -4874,7 +5382,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -4940,7 +5448,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -4990,7 +5498,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5151,7 +5659,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5175,7 +5683,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5252,7 +5760,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5293,7 +5801,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5343,7 +5851,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5449,7 +5957,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5470,7 +5978,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5861,7 +6369,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5887,7 +6395,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -5993,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(206, 147, 216, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #CE93D8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #CE93D8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6131,8 +6697,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6142,13 +6708,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6345,8 +6911,39 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6396,7 +6993,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6423,8 +7020,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6434,13 +7031,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6501,8 +7098,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6512,13 +7109,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6557,15 +7154,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6625,8 +7222,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6636,13 +7233,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6712,8 +7309,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6723,13 +7320,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6775,20 +7372,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6808,8 +7405,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6925,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6951,8 +7551,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6962,13 +7562,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7116,10 +7716,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7361,8 +7961,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7372,13 +7972,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index c836ad32c2..d59fcea4f8 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-left: 1px solid hsla(0, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,26 +733,56 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,42 +793,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; + width: 18px; + height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #9FA8DA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9FA8DA; - background: #9FA8DA; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-checkbox:not(.p-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: #9FA8DA; + } + .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: hsla(0, 0%, 100%, 0.06); + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; } .p-chips { @@ -856,12 +938,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0deg, 0%, 100%, 0.24); + background: hsla(0, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -976,7 +1058,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -991,13 +1073,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1039,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1081,7 +1163,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1103,14 +1185,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-top: 1px solid hsla(0, 0%, 100%, 0.3); + border-left: 1px solid hsla(0, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-right: 1px solid hsla(0, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1166,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1184,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #9FA8DA; + transform: translateX(1.5rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: hsla(0, 0%, 100%, 0.3); } - .p-inputswitch.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: rgba(159, 168, 218, 0.5); } - .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: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1214,7 +1330,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1281,13 +1397,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1327,14 +1443,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1387,15 +1503,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1427,7 +1543,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1523,7 +1639,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1538,13 +1654,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1556,7 +1672,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1585,7 +1701,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1649,7 +1765,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1690,27 +1806,59 @@ .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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1718,36 +1866,73 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; - color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1760,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1815,7 +2000,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1855,7 +2040,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1881,7 +2066,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1911,7 +2096,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1962,52 +2147,86 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); + } + .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-button { + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #9FA8DA; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2457,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -3279,7 +3546,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3287,12 +3554,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3301,7 +3568,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3365,12 +3632,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3383,10 +3650,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3550,12 +3817,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3628,11 +3895,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4044,7 +4311,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0deg, 0%, 100%, 0.12); + border-top: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4054,7 +4321,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0deg, 0%, 100%, 0.12); + border-left: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4116,10 +4383,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4127,7 +4394,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4542,7 +4809,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4563,7 +4830,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4705,7 +4972,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4745,7 +5012,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4806,7 +5073,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -4856,7 +5123,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4943,7 +5210,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4978,7 +5245,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5058,7 +5325,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5086,7 +5353,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5115,7 +5382,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5181,7 +5448,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5231,7 +5498,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5392,7 +5659,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5416,7 +5683,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5493,7 +5760,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5534,7 +5801,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5584,7 +5851,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5690,7 +5957,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5711,7 +5978,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6102,7 +6369,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6128,7 +6395,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6234,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(159, 168, 218, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9FA8DA; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #9FA8DA; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6372,8 +6697,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6383,13 +6708,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6586,8 +6911,39 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6637,7 +6993,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6664,8 +7020,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6675,13 +7031,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6742,8 +7098,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6753,13 +7109,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6798,15 +7154,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6866,8 +7222,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6877,13 +7233,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6953,8 +7309,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6964,13 +7320,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7016,20 +7372,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7049,8 +7405,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7166,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7192,8 +7551,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7203,13 +7562,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7357,10 +7716,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7602,8 +7961,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7613,13 +7972,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index fe0d03456a..45e572ac79 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -741,10 +741,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -753,6 +782,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +793,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; + width: 18px; + height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; } - .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: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #673AB7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #673AB7; - background: #673AB7; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + 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: #673AB7; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #673AB7; } - .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: #ececec; } - .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: #673AB7; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - 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: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } - .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: none; border-color: #673AB7; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(103, 58, 183, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #673AB7; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -878,7 +1094,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 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; } @@ -920,13 +1136,6 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 1rem; @@ -959,18 +1182,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #673AB7; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #673AB7; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1168,11 +1413,40 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1222,10 +1498,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-listbox.p-invalid { border-color: #b00020; } @@ -1256,11 +1549,100 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #673AB7; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1330,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1340,7 +1715,11 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -1371,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1399,15 +1782,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1432,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1444,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,31 +1866,51 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; - color: #673AB7; } - .p-radiobutton.p-invalid > .p-radiobutton-box { - border-color: #b00020; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #673AB7; } - .p-radiobutton:focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #b00020; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } .p-rating { @@ -1729,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #673AB7; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2216,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #673AB7; background: transparent; @@ -5993,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(103, 58, 183, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #673AB7; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #673AB7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6345,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6925,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 07ed790ef5..f2fac2e36e 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -741,10 +741,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -753,6 +782,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,42 +793,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; + width: 18px; + height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3F51B5; background: #3F51B5; } - .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: 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; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3F51B5; - background: #3F51B5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3F51B5; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3F51B5; } - .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: #ececec; } - .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: #3F51B5; + } + .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: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .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; } .p-chips { @@ -1166,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1184,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #3F51B5; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #3F51B5; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1690,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1702,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1718,36 +1866,73 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; - color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #ffffff; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1760,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1970,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #3F51B5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2457,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -6234,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(63, 81, 181, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3F51B5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #3F51B5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6586,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -7166,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 54cfaf7397..d510f3659a 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #CE93D8; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-left: 1px solid hsla(0, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,26 +733,75 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; width: 18px; height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #CE93D8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #CE93D8; - background: #CE93D8; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #CE93D8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-checkbox:not(.p-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: #CE93D8; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } - .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: none; border-color: #CE93D8; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(206, 147, 216, 0.16); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: hsla(0, 0%, 100%, 0.24); + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #CE93D8; } + .p-dropdown.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -878,7 +1094,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; } @@ -905,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -920,13 +1136,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,13 +1148,27 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -959,29 +1182,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-top: 1px solid hsla(0, 0%, 100%, 0.3); + border-left: 1px solid hsla(0, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-right: 1px solid hsla(0, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #CE93D8; + transform: translateX(1.5rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: hsla(0, 0%, 100%, 0.3); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.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: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1085,7 +1330,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1152,13 +1397,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1168,15 +1413,44 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1222,9 +1498,26 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-listbox.p-invalid { border-color: #f44435; @@ -1250,17 +1543,106 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #CE93D8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1284,7 +1672,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1323,16 +1701,13 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1340,7 +1715,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1371,18 +1750,22 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { - color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1399,15 +1782,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0deg, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1432,27 +1806,59 @@ .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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,31 +1866,51 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; - color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } - .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: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } .p-rating { @@ -1574,7 +2000,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1614,7 +2040,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1640,7 +2066,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1670,7 +2096,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1721,52 +2147,86 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); + } + .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-button { + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #CE93D8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2216,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -3038,7 +3546,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3046,12 +3554,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3060,7 +3568,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3124,12 +3632,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3142,10 +3650,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3309,12 +3817,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3387,11 +3895,11 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3803,7 +4311,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0deg, 0%, 100%, 0.12); + border-top: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -3813,7 +4321,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0deg, 0%, 100%, 0.12); + border-left: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -3875,10 +4383,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -3886,7 +4394,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4301,7 +4809,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4322,7 +4830,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4464,7 +4972,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4504,7 +5012,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4565,7 +5073,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -4615,7 +5123,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4702,7 +5210,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4737,7 +5245,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -4817,7 +5325,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4845,7 +5353,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -4874,7 +5382,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -4940,7 +5448,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -4990,7 +5498,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5151,7 +5659,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5175,7 +5683,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5252,7 +5760,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5293,7 +5801,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5343,7 +5851,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5449,7 +5957,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5470,7 +5978,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5861,7 +6369,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5887,7 +6395,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -5993,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(206, 147, 216, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #CE93D8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #CE93D8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6131,8 +6697,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6142,13 +6708,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6345,8 +6911,39 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6396,7 +6993,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6423,8 +7020,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6434,13 +7031,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6501,8 +7098,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6512,13 +7109,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6557,15 +7154,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6625,8 +7222,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6636,13 +7233,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6712,8 +7309,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6723,13 +7320,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6775,20 +7372,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6808,8 +7405,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6925,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -6951,8 +7551,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6962,13 +7562,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7116,10 +7716,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7361,8 +7961,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7372,13 +7972,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 745ee08ace..ad3f9dd87b 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-left: 1px solid hsla(0, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,26 +733,56 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,42 +793,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; + width: 18px; + height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #9FA8DA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9FA8DA; - background: #9FA8DA; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-checkbox:not(.p-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: #9FA8DA; + } + .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: hsla(0, 0%, 100%, 0.06); + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; } .p-chips { @@ -856,12 +938,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0deg, 0%, 100%, 0.24); + background: hsla(0, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -976,7 +1058,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -991,13 +1073,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1039,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1081,7 +1163,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1103,14 +1185,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-top: 1px solid hsla(0, 0%, 100%, 0.3); + border-left: 1px solid hsla(0, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-right: 1px solid hsla(0, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1166,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1184,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0deg, 0%, 100%, 0.3); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #9FA8DA; + transform: translateX(1.5rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: hsla(0, 0%, 100%, 0.3); } - .p-inputswitch.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: rgba(159, 168, 218, 0.5); } - .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: none; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1214,7 +1330,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1281,13 +1397,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0deg, 0%, 100%, 0.06); + background-color: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1327,14 +1443,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1387,15 +1503,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1427,7 +1543,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1523,7 +1639,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1538,13 +1654,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1556,7 +1672,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1585,7 +1701,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1649,7 +1765,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1690,27 +1806,59 @@ .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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1718,36 +1866,73 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; - color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0deg, 0%, 100%, 0.06); + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1760,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1815,7 +2000,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0deg, 0%, 100%, 0.3); + background: hsla(0, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -1855,7 +2040,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1881,7 +2066,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1911,7 +2096,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1962,52 +2147,86 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0deg, 0%, 100%, 0.06); + background: hsla(0, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); + } + .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-button { + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #9FA8DA; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2457,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -3279,7 +3546,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3287,12 +3554,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3301,7 +3568,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3365,12 +3632,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3383,10 +3650,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3550,12 +3817,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3628,11 +3895,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4044,7 +4311,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0deg, 0%, 100%, 0.12); + border-top: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4054,7 +4321,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0deg, 0%, 100%, 0.12); + border-left: 1px hsla(0, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4116,10 +4383,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0deg, 0%, 100%, 0.04); + background: hsla(0, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4127,7 +4394,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); @@ -4542,7 +4809,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4563,7 +4830,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4705,7 +4972,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4745,7 +5012,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4806,7 +5073,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -4856,7 +5123,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4943,7 +5210,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -4978,7 +5245,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5058,7 +5325,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5086,7 +5353,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5115,7 +5382,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5181,7 +5448,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5231,7 +5498,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5392,7 +5659,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5416,7 +5683,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5493,7 +5760,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5534,7 +5801,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5584,7 +5851,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -5690,7 +5957,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0deg, 0%, 100%, 0.12); + background: hsla(0, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5711,7 +5978,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-top: 1px solid hsla(0, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6102,7 +6369,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6128,7 +6395,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0deg, 0%, 100%, 0.12); + background-color: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6234,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(159, 168, 218, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9FA8DA; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #9FA8DA; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6372,8 +6697,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6383,13 +6708,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6586,8 +6911,39 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { - border: 1px solid hsla(0deg, 0%, 100%, 0.3); + border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6637,7 +6993,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6664,8 +7020,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6675,13 +7031,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6742,8 +7098,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6753,13 +7109,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6798,15 +7154,15 @@ transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0deg, 0%, 100%, 0.7); + border-color: hsla(0, 0%, 100%, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6866,8 +7222,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6877,13 +7233,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6953,8 +7309,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6964,13 +7320,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7016,20 +7372,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7049,8 +7405,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7166,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7192,8 +7551,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7203,13 +7562,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7357,10 +7716,10 @@ transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0deg, 0%, 100%, 0.7); + border: 2px solid hsla(0, 0%, 100%, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7602,8 +7961,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0deg, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); + background: hsla(0, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7613,13 +7972,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0deg, 0%, 100%, 0.08); + background-color: hsla(0, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0deg, 0%, 100%, 0.1); + background-color: hsla(0, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 47e3df24a1..7cf48a7d64 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -741,10 +741,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -753,6 +782,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +793,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; + width: 18px; + height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; } - .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: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #673AB7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #673AB7; - background: #673AB7; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + 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: #673AB7; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #673AB7; } - .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: #ececec; } - .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: #673AB7; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-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: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } - .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: none; border-color: #673AB7; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(103, 58, 183, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #673AB7; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -878,7 +1094,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 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; } @@ -920,13 +1136,6 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem; @@ -959,18 +1182,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #673AB7; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #673AB7; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1168,11 +1413,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1222,10 +1498,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-listbox.p-invalid { border-color: #b00020; } @@ -1256,11 +1549,100 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #673AB7; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1330,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1340,7 +1715,11 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -1371,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1399,15 +1782,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1432,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1444,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,31 +1866,51 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; - color: #673AB7; } - .p-radiobutton.p-invalid > .p-radiobutton-box { - border-color: #b00020; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #673AB7; } - .p-radiobutton:focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: #b00020; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } .p-rating { @@ -1729,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #673AB7; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2216,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #673AB7; background: transparent; @@ -5993,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(103, 58, 183, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #673AB7; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #673AB7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6345,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6925,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 03b43807e8..f6bced63db 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -741,10 +741,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #757575; background: #ffffff; @@ -753,6 +782,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,42 +793,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; + width: 18px; + height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3F51B5; background: #3F51B5; } - .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: 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; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3F51B5; - background: #3F51B5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3F51B5; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3F51B5; } - .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: #ececec; } - .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: #3F51B5; + } + .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: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .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; } .p-chips { @@ -1166,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1184,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #3F51B5; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #3F51B5; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1690,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1702,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1718,36 +1866,73 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; - color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #ffffff; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1760,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1970,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #3F51B5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2457,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -6234,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(63, 81, 181, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #3F51B5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #3F51B5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6586,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -7166,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index d873599dfc..172c2b13d3 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -743,10 +743,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d8dee9; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d8dee9; background: #ffffff; @@ -755,6 +784,7 @@ color: #4c566a; border-radius: 4px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -765,42 +795,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d8dee9; + background: #ffffff; + width: 20px; + height: 20px; + color: #4c566a; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #5e81ac; background: #5e81ac; } - .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: #81a1c1; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #48678c; background: #81a1c1; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81a1c1; - } - .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 #c0d0e0; border-color: #81a1c1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #48678c; - background: #81a1c1; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #bf616a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #eceff4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #5e81ac; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #eceff4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #81a1c1; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #eceff4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #5e81ac; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #eceff4; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #81a1c1; + } + .p-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: #eceff4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #5e81ac; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #eceff4; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #81a1c1; } .p-chips { @@ -1168,14 +1250,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } + .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: #d8dee9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #5e81ac; @@ -1186,27 +1304,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 #c0d0e0; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #eceff4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #5e81ac; } - .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: #eceff4; } - .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: #81a1c1; } - .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 #c0d0e0; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #bf616a; } .p-inputtext { @@ -1692,10 +1808,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #7fa366; } + .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 #d8dee9; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d8dee9; background: #ffffff; @@ -1704,15 +1860,7 @@ color: #4c566a; 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: #81a1c1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #c0d0e0; - border-color: #81a1c1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1720,36 +1868,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #5e81ac; background: #5e81ac; } - .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: #81a1c1; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #5e81ac; background: #81a1c1; - 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 #c0d0e0; + border-color: #81a1c1; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #bf616a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #eceff4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #5e81ac; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #eceff4; } - .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: #81a1c1; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #eceff4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #5e81ac; } - .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: #eceff4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #81a1c1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4c566a; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1762,7 +1947,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #bf616a; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -1972,44 +2157,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: 2px solid #d8dee9; + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 2px solid #d8dee9; color: #4c566a; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #81a1c1; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #eceff4; - border-color: #81a1c1; - color: #4c566a; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #81a1c1; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #5e81ac; border-color: #5e81ac; 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: #eceff4; + border-color: #81a1c1; + color: #4c566a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #81a1c1; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #81a1c1; border-color: #5e81ac; 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 #c0d0e0; + border-color: #81a1c1; + } + .p-togglebutton.p-invalid > .p-button { border-color: #bf616a; } .p-button { @@ -6236,6 +6455,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e9f0; + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #5e81ac; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #5e81ac; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 5d174c729e..553af1d71b 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 14px; height: 14px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #a5acb3; + border-radius: 1px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #a5acb3; + background: #ffffff; + width: 14px; + height: 14px; + color: #343a3f; + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 12px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 12px; + height: 12px; + } .p-checkbox .p-checkbox-box { border: 2px solid #a5acb3; background: #ffffff; @@ -733,6 +781,7 @@ color: #343a3f; border-radius: 1px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,42 +792,75 @@ width: 12px; height: 12px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #1174c0; background: #1174c0; } - .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: #1174c0; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0e5d9a; background: #0e5d9a; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #1174c0; - } - .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 #90c9f5; border-color: #1174c0; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0e5d9a; - background: #0e5d9a; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #d8222f; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f4f8; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #1174c0; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f4f8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e5d9a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f4f8; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #1174c0; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f4f8; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e5d9a; + } + .p-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: #f2f4f8; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #1174c0; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f2f4f8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #0e5d9a; } .p-chips { @@ -1146,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } + .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: 2rem; height: 1.155rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #a5acb3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1164,27 +1282,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(0.825rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #929ba3; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #1174c0; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(0.825rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #929ba3; } - .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: #0f68ad; } - .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 #90c9f5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #d8222f; } .p-inputtext { @@ -1670,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #207f3b; } + .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: 14px; height: 14px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #a5acb3; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #a5acb3; background: #ffffff; @@ -1682,15 +1838,7 @@ color: #343a3f; 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: #1174c0; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - border-color: #1174c0; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 8px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #1174c0; background: #1174c0; } - .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: #1174c0; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0e5d9a; background: #0e5d9a; - 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 #90c9f5; + border-color: #1174c0; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #d8222f; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f2f4f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #1174c0; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f2f4f8; } - .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: #0e5d9a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f4f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #1174c0; } - .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: #f2f4f8; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0e5d9a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #343a3f; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -1950,44 +2135,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 #a5acb3; + border-radius: 1px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #a5acb3; color: #343a3f; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #697077; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #dde1e6; - border-color: #a5acb3; - color: #343a3f; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #697077; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #1174c0; border-color: #1174c0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #dde1e6; + border-color: #a5acb3; + color: #343a3f; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #697077; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #0f68ad; border-color: #0f68ad; 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 #90c9f5; + border-color: #1174c0; + } + .p-togglebutton.p-invalid > .p-button { border-color: #d8222f; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 1px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #1174c0; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #1174c0; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 1px; + border-top-right-radius: 1px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 584a16b509..7bacbd9e13 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #a6a6a6; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; + width: 20px; + height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -733,6 +781,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #212121; - } - .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 #8dcdff; border-color: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } + .p-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: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #007ad9; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #005b9f; } .p-chips { @@ -1146,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .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: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1164,27 +1282,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 #8dcdff; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #007ad9; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #cccccc; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7b7b7; } - .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: #116fbf; } - .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 #8dcdff; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1670,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + .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: 1px solid #a6a6a6; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1682,15 +1838,7 @@ color: #333333; 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: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005b9f; background: #005b9f; - 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 #8dcdff; + border-color: #007ad9; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007ad9; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #005b9f; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #005b9f; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1950,44 +2135,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #dadada; border: 1px solid #dadada; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #007ad9; border-color: #007ad9; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #212121; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #116fbf; border-color: #116fbf; 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 #8dcdff; + border-color: #007ad9; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } .p-button { @@ -6165,6 +6384,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index d63f2e988e..2eadc309e4 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #a6a6a6; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; + width: 20px; + height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -733,6 +781,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,47 +792,80 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #212121; - } - .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 #8dcdff; border-color: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .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: #f4f4f4; } - .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: #005b9f; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + .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: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .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: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1167,27 +1285,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 #8dcdff; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #007ad9; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #cccccc; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7b7b7; } - .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: #116fbf; } - .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 #8dcdff; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + .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: 1px solid #a6a6a6; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1685,15 +1841,7 @@ color: #333333; 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: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005b9f; background: #005b9f; - 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 #8dcdff; + border-color: #007ad9; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007ad9; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #005b9f; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #005b9f; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #dadada; border: 1px solid #dadada; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #007ad9; border-color: #007ad9; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #212121; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #116fbf; border-color: #116fbf; 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 #8dcdff; + border-color: #007ad9; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } .p-button { @@ -6174,6 +6393,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 54fb418ce1..44c76afdfc 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #a6a6a6; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; + width: 20px; + height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -733,6 +781,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,47 +792,80 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #212121; - } - .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 #8dcdff; border-color: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .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: #f4f4f4; } - .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: #005b9f; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + .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: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-chips { display: inline-flex; } @@ -1149,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .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: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1167,27 +1285,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 #8dcdff; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #007ad9; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #cccccc; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7b7b7; } - .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: #116fbf; } - .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 #8dcdff; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1673,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + .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: 1px solid #a6a6a6; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1685,15 +1841,7 @@ color: #333333; 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: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1701,39 +1849,76 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005b9f; background: #005b9f; - 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 #8dcdff; + border-color: #007ad9; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007ad9; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #005b9f; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #005b9f; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1746,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1959,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #dadada; border: 1px solid #dadada; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #007ad9; border-color: #007ad9; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #212121; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #116fbf; border-color: #116fbf; 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 #8dcdff; + border-color: #007ad9; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } .p-button { @@ -6174,6 +6393,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-metergroup .p-metergroup-meter-container { + background: #eaeaea; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #007ad9; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #007ad9; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 4fdfdbba5f..64a1c245ac 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #dadada; + border-radius: 2px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #dadada; + background: #ffffff; + width: 20px; + height: 20px; + color: #666666; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 1px solid #dadada; background: #ffffff; @@ -733,6 +781,7 @@ color: #666666; border-radius: 2px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #7b95a3; background: #7b95a3; } - .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: #a6a6a6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #617c8a; background: #617c8a; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #a6a6a6; - } - .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 #e4e9ec; border-color: #7b95a3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #617c8a; - background: #617c8a; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e7a3a3; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #7b95a3; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #617c8a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #7b95a3; } - .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: #f4f4f4; } - .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: #617c8a; + } + .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: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #7b95a3; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #617c8a; } .p-chips { @@ -1146,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } + .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: #ffffff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #7b95a3; @@ -1164,27 +1282,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #afd3c8; } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #385048; + transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #d8dae2; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #afd3c8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #385048; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #afd3c8; + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e7a3a3; } .p-inputtext { @@ -1670,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #a3e2c6; } + .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: 1px solid #dadada; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #dadada; background: #ffffff; @@ -1682,15 +1838,7 @@ color: #666666; 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: #a6a6a6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - border-color: #7b95a3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #7b95a3; background: #7b95a3; } - .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: #a6a6a6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #617c8a; background: #617c8a; - 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 #e4e9ec; + border-color: #7b95a3; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e7a3a3; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #7b95a3; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #617c8a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #7b95a3; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #617c8a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #666666; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f3b9b9; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -1950,44 +2135,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #eaeaea; + border-radius: 2px; + } + .p-togglebutton .p-button { background: #eaeaea; border: 1px solid #eaeaea; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #666666; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #afd3c8; border-color: #afd3c8; color: #385048; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #385048; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #666666; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #8dc8b5; border-color: #8dc8b5; color: #385048; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #385048; } - .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 #e4e9ec; + border-color: #7b95a3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e7a3a3; } .p-button { @@ -6165,6 +6384,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-metergroup .p-metergroup-meter-container { + background: #efefef; + border-radius: 2px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #7b95a3; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 24px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #7b95a3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 24px; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 21ecd1a446..7b0329d15a 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #2196f3; background: #2196f3; } - .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: #2196f3; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0b7ad1; background: #0b7ad1; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #2196f3; - } - .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 #a6d5fa; border-color: #2196f3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0b7ad1; - background: #0b7ad1; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #2196f3; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0b7ad1; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #2196f3; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0b7ad1; + } + .p-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: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #2196f3; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #0b7ad1; } .p-chips { @@ -1146,14 +1228,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; @@ -1164,27 +1282,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 #a6d5fa; - } - .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: #2196f3; } - .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: #0d89ec; } - .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 #a6d5fa; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #2196f3; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - border-color: #2196f3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #2196f3; background: #2196f3; } - .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: #2196f3; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0b7ad1; background: #0b7ad1; - 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 #a6d5fa; + border-color: #2196f3; } .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: #2196f3; + } + .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: #0b7ad1; + } + .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: #2196f3; } - .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: #0b7ad1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -1950,44 +2135,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: #2196f3; border-color: #2196f3; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #0d89ec; border-color: #0d89ec; 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 #a6d5fa; + border-color: #2196f3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #2196f3; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #2196f3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 848416417a..10171d736a 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #4caf50; background: #4caf50; } - .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: #4caf50; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #3d8c40; background: #3d8c40; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #4caf50; - } - .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 #b7e0b8; border-color: #4caf50; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3d8c40; - background: #3d8c40; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #4caf50; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3d8c40; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #4caf50; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3d8c40; + } + .p-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: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #4caf50; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #3d8c40; } .p-chips { @@ -1146,14 +1228,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; @@ -1164,27 +1282,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 #b7e0b8; - } - .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: #4caf50; } - .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: #449e48; } - .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 #b7e0b8; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #4caf50; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - border-color: #4caf50; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #4caf50; background: #4caf50; } - .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: #4caf50; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3d8c40; background: #3d8c40; - 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 #b7e0b8; + border-color: #4caf50; } .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: #4caf50; + } + .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: #3d8c40; + } + .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: #4caf50; } - .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: #3d8c40; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -1950,44 +2135,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: #4caf50; border-color: #4caf50; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #449e48; border-color: #449e48; 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 #b7e0b8; + border-color: #4caf50; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #4caf50; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #4caf50; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index cb2519d539..53ae1864f3 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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: #212529; + 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 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffc107; background: #ffc107; } - .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: #ffc107; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #d29d00; background: #d29d00; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffc107; - } - .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 #ffe69c; border-color: #ffc107; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #d29d00; - background: #d29d00; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffc107; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #d29d00; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #ffc107; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #d29d00; + } + .p-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: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #ffc107; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #d29d00; } .p-chips { @@ -1146,14 +1228,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; @@ -1164,27 +1282,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 #ffe69c; - } - .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: #ffc107; } - .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: #ecb100; } - .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 #ffe69c; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #ffc107; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - border-color: #ffc107; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffc107; background: #ffc107; } - .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: #ffc107; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #d29d00; background: #d29d00; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #ffc107; } .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: #ffc107; + } + .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: #d29d00; + } + .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: #ffc107; } - .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: #d29d00; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -1950,44 +2135,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: #ffc107; border-color: #ffc107; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #ecb100; border-color: #ecb100; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #ffe69c; + border-color: #ffc107; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffc107; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffc107; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index d23b0688e9..fbbce7d9f3 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -10,7 +10,7 @@ --text-color: rgba(255, 255, 255, 0.87); --text-color-secondary: rgba(255, 255, 255, 0.6); --primary-color: #b19df7; - --primary-color-text: hsl(234deg, 15%, 13%); + --primary-color-text: hsl(234, 15%, 13%); --surface-0: #1d1e27; --surface-50: #34343d; --surface-100: #4a4b52; @@ -741,8 +741,56 @@ background-color: #3e4053; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #3e4053; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #3e4053; + background: #1d1e27; width: 22px; height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: hsl(234, 15%, 13%); + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #3e4053; @@ -752,52 +800,86 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 14px; } .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #b19df7; background: #b19df7; } - .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: #b19df7; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9378f4; background: #9378f4; - color: hsl(234deg, 15%, 13%); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #b19df7; + color: hsl(234, 15%, 13%); } - .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 #e0d8fc; border-color: #b19df7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9378f4; - background: #9378f4; - color: hsl(234deg, 15%, 13%); - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ff9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3e4053; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #b19df7; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3e4053; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9378f4; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3e4053; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #b19df7; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3e4053; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9378f4; + } + .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: #3e4053; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #b19df7; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #3e4053; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9378f4; } .p-chips { @@ -1165,14 +1247,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } + .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: #3e4053; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1183,27 +1301,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 #e0d8fc; - } - .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: #b19df7; } - .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: #a28af5; } - .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 #e0d8fc; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ff9a9a; } .p-inputtext { @@ -1689,10 +1805,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #3e4053; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #3e4053; background: #1d1e27; @@ -1701,52 +1857,81 @@ 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: #b19df7; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - border-color: #b19df7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234deg, 15%, 13%); + background-color: hsl(234, 15%, 13%); } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #b19df7; background: #b19df7; } - .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: #b19df7; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9378f4; background: #9378f4; - color: hsl(234deg, 15%, 13%); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: hsl(234, 15%, 13%); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ff9a9a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #3e4053; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #b19df7; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #3e4053; } - .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: #9378f4; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3e4053; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #b19df7; } - .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: #3e4053; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #9378f4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1759,7 +1944,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -1795,20 +1980,20 @@ .p-selectbutton .p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, .p-selectbutton .p-button.p-highlight .p-button-icon-right { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-selectbutton.p-invalid > .p-button { border-color: #ff9a9a; @@ -1969,48 +2154,82 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3e4053; } - .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 #3e4053; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #282936; border: 1px solid #3e4053; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { + .p-togglebutton.p-highlight .p-button { + background: #b19df7; + border-color: #b19df7; + color: hsl(234, 15%, 13%); + } + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: hsl(234, 15%, 13%); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { background: rgba(255, 255, 255, 0.03); border-color: #3e4053; 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: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.p-button.p-highlight { - background: #b19df7; - border-color: #b19df7; - color: hsl(234deg, 15%, 13%); - } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: hsl(234deg, 15%, 13%); - } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #a28af5; border-color: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { + color: hsl(234, 15%, 13%); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234deg, 15%, 13%); + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton.p-invalid > .p-button { border-color: #ff9a9a; } .p-button { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); background: #b19df7; border: 1px solid #b19df7; padding: 0.75rem 1.25rem; @@ -2020,12 +2239,12 @@ } .p-button:not(:disabled):hover { background: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); border-color: #a28af5; } .p-button:not(:disabled):active { background: #9378f4; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); border-color: #9378f4; } .p-button.p-button-outlined { @@ -2107,7 +2326,7 @@ height: 1rem; line-height: 1rem; color: #b19df7; - background-color: hsl(234deg, 15%, 13%); + background-color: hsl(234, 15%, 13%); } .p-button.p-button-raised { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -2456,6 +2675,54 @@ border-color: transparent; color: #eb9a9c; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #1d1e27; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d2d2d4; + color: #1d1e27; + border-color: #d2d2d4; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #bbbcbe; + color: #1d1e27; + border-color: #bbbcbe; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #b19df7; background: transparent; @@ -3878,7 +4145,7 @@ border-radius: 50%; width: 1rem; height: 1rem; - background-color: hsl(234deg, 15%, 13%); + background-color: hsl(234, 15%, 13%); } .p-timeline .p-timeline-event-connector { background-color: #3e4053; @@ -4315,7 +4582,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); width: 2rem; height: 2rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4326,7 +4593,7 @@ } .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #a28af5; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); } .p-overlaypanel:after { border: solid transparent; @@ -6140,7 +6407,7 @@ } .p-tag { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; @@ -6184,6 +6451,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-metergroup .p-metergroup-meter-container { + background: #3e4053; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #b19df7; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #b19df7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -6196,7 +6521,7 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); line-height: 1.5rem; } .p-terminal { @@ -6212,7 +6537,7 @@ } .p-badge { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -6253,7 +6578,7 @@ } .p-tag { background: #b19df7; - color: hsl(234deg, 15%, 13%); + color: hsl(234, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 957fef8f0b..5951c08be2 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -741,8 +741,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 22px; + height: 22px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d3dbe3; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d3dbe3; + background: #ffffff; width: 22px; height: 22px; + color: #043d75; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d3dbe3; @@ -752,6 +800,7 @@ color: #043d75; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -762,42 +811,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #7254f3; background: #7254f3; } - .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: #7254f3; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #5935f1; background: #5935f1; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #7254f3; - } - .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 #c7bbfa; border-color: #7254f3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #5935f1; - background: #5935f1; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ff6767; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f6f9fc; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #7254f3; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f6f9fc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #5935f1; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f6f9fc; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #7254f3; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f6f9fc; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #5935f1; + } + .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: #f6f9fc; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #7254f3; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f6f9fc; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #5935f1; } .p-chips { @@ -1165,14 +1247,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } + .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: #d3dbe3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1183,27 +1301,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 #c7bbfa; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b8c5d2; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #7254f3; } - .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: #b8c5d2; } - .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: #6545f2; } - .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 #c7bbfa; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ff6767; } .p-inputtext { @@ -1689,10 +1805,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d3dbe3; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d3dbe3; background: #ffffff; @@ -1701,15 +1857,7 @@ color: #043d75; 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: #7254f3; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - border-color: #7254f3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1717,36 +1865,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #7254f3; background: #7254f3; } - .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: #7254f3; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #5935f1; background: #5935f1; - 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 #c7bbfa; + border-color: #7254f3; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ff6767; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f6f9fc; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #7254f3; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f6f9fc; } - .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: #5935f1; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f6f9fc; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #7254f3; } - .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: #f6f9fc; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #5935f1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #043d75; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1759,7 +1944,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -1969,44 +2154,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 #d3dbe3; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d3dbe3; color: #043d75; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #708da9; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f9fc; - border-color: #d3dbe3; - color: #043d75; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #708da9; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #7254f3; border-color: #7254f3; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #f6f9fc; + border-color: #d3dbe3; + color: #043d75; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #708da9; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #6545f2; border-color: #6545f2; 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 #c7bbfa; + border-color: #7254f3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ff6767; } .p-button { @@ -2456,6 +2675,54 @@ border-color: transparent; color: #ea5455; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212529; + border: 1px solid #212529; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #343a40; + color: #ffffff; + border-color: #343a40; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #043d75; + color: #ffffff; + border-color: #043d75; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212529; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + border-color: transparent; + color: #212529; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + border-color: transparent; + color: #212529; + } .p-button.p-button-link { color: #5935f1; background: transparent; @@ -6184,6 +6451,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-metergroup .p-metergroup-meter-container { + background: #dfe7ef; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #7254f3; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #7254f3; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 5afb470ab2..e352778067 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -749,10 +749,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 16px; height: 16px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d4d4d8; + border-radius: 0.375rem; + } .p-checkbox .p-checkbox-box { border: 2px solid #d4d4d8; background: #ffffff; @@ -761,6 +790,7 @@ color: #3f3f46; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -771,42 +801,94 @@ width: 10px; height: 10px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d4d4d8; + background: #ffffff; + width: 16px; + height: 16px; + color: #3f3f46; + border-radius: 0.375rem; + transition: none; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 10px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 10px; + height: 10px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #4f46e5; background: #4f46e5; } - .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: #d4d4d8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #4f46e5; background: #4f46e5; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #d4d4d8; - } - .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 #6366f1; border-color: #4f46e5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #4f46e5; - background: #4f46e5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f0a9a7; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #fafafa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #4f46e5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #fafafa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #4f46e5; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #fafafa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #4f46e5; } - .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: #fafafa; } - .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: #4f46e5; + } + .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: #fafafa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #4f46e5; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #fafafa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #4f46e5; } .p-chips { @@ -1174,14 +1256,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } + .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: #d4d4d8; transition: none; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1192,27 +1310,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 #6366f1; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #bebec4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #4f46e5; } - .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: #bebec4; } - .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: #4338ca; } - .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 #6366f1; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f0a9a7; } .p-inputtext { @@ -1698,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #22c55e; } + .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: 16px; height: 16px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d4d4d8; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d4d4d8; background: #ffffff; @@ -1710,15 +1866,7 @@ color: #3f3f46; border-radius: 50%; transition: none; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #d4d4d8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366f1; - border-color: #4f46e5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 6px; @@ -1726,36 +1874,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #4f46e5; background: #4f46e5; } - .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: #d4d4d8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #4f46e5; background: #4f46e5; - 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 #6366f1; + border-color: #4f46e5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f0a9a7; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #fafafa; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #4f46e5; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #fafafa; } - .p-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: #4f46e5; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #fafafa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #4f46e5; } - .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: #fafafa; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #4f46e5; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3f3f46; transition: none; @@ -1768,7 +1953,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ef4444; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -1978,44 +2163,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 #d4d4d8; + border-radius: 0.375rem; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d4d4d8; color: #3f3f46; transition: none; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #71717a; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f4f4f5; - border-color: #d4d4d8; - color: #3f3f46; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #71717a; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #4f46e5; border-color: #4f46e5; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #f4f4f5; + border-color: #d4d4d8; + color: #3f3f46; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #71717a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #4338ca; border-color: #4338ca; 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 #6366f1; + border-color: #4f46e5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f0a9a7; } .p-button { @@ -6242,6 +6461,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 0.375rem; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #4f46e5; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #4f46e5; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index d980247cc2..13fc592684 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -733,6 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #2396f2; background: #2396f2; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #64b5f6; - } - .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 #93cbf9; border-color: #64b5f6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #2396f2; - background: #2396f2; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #64b5f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2396f2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #64b5f6; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2396f2; + } + .p-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: #64b5f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #2396f2; } .p-chips { @@ -1146,14 +1228,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); @@ -1164,27 +1282,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 #93cbf9; - } - .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: #64b5f6; } - .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: #43a5f4; } - .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 #93cbf9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #64b5f6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64b5f6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #2396f2; background: #2396f2; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; } .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: #64b5f6; + } + .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: #2396f2; + } + .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: #64b5f6; } - .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: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -1950,44 +2135,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: #64b5f6; border-color: #64b5f6; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #43a5f4; border-color: #43a5f4; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #93cbf9; + border-color: #64b5f6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #64b5f6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #64b5f6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 99cb80121d..d9766a9714 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -733,6 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #54b358; background: #54b358; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81c784; - } - .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 #a7d8a9; border-color: #81c784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #54b358; - background: #54b358; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81c784; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #54b358; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #81c784; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #54b358; + } + .p-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: #81c784; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #54b358; } .p-chips { @@ -1146,14 +1228,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); @@ -1164,27 +1282,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 #a7d8a9; - } - .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: #81c784; } - .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: #6abd6e; } - .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 #a7d8a9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #81c784; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81c784; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #54b358; background: #54b358; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; } .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: #81c784; + } + .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: #54b358; + } + .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: #81c784; } - .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: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -1950,44 +2135,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: #81c784; border-color: #81c784; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #6abd6e; border-color: #6abd6e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #a7d8a9; + border-color: #81c784; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #81c784; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #81c784; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 6b6b01f861..80626138fd 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -733,6 +781,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,42 +792,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ffc50c; background: #ffc50c; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffd54f; - } - .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 #ffe284; border-color: #ffd54f; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffc50c; - background: #ffc50c; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffd54f; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffc50c; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #ffd54f; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffc50c; + } + .p-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: #ffd54f; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled: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-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #ffc50c; } .p-chips { @@ -1146,14 +1228,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); @@ -1164,27 +1282,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 #ffe284; - } - .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: #ffd54f; } - .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: #ffcd2e; } - .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 #ffe284; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1670,10 +1786,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; @@ -1682,15 +1838,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: #ffd54f; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #ffd54f; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1698,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ffc50c; background: #ffc50c; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; } .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: #ffd54f; + } + .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: #ffc50c; + } + .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: #ffd54f; } - .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: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1740,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -1950,44 +2135,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: #ffd54f; border-color: #ffd54f; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #ffcd2e; border-color: #ffcd2e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #ffe284; + border-color: #ffd54f; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -6214,6 +6433,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ffd54f; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ffd54f; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 12e9cf1f13..0de8514948 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -747,10 +747,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #263238; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #263238; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #263238; + background: #0e1315; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.3s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #263238; background: #0e1315; @@ -759,6 +807,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -769,42 +818,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9eade6; background: #9eade6; } - .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: #2d3e44; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #7f93de; background: #7f93de; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #2d3e44; - } - .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 #9eade6; border-color: #9eade6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #7f93de; - background: #7f93de; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f78c79; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #263238; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9eade6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #263238; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7f93de; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #263238; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9eade6; } - .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: #263238; } - .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: #7f93de; + } + .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: #263238; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9eade6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #263238; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #7f93de; } .p-chips { @@ -1172,14 +1254,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } + .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: 6px; + } .p-inputswitch .p-inputswitch-slider { background: #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1190,27 +1308,25 @@ border-radius: 6px; transition-duration: 0.3s; } - .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 #9eade6; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(158, 173, 230, 0.08); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #9eade6; } - .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(158, 173, 230, 0.08); } - .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: #8fa0e2; } - .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 #9eade6; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f78c79; } .p-inputtext { @@ -1696,10 +1812,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #cede9c; } + .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 #263238; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #263238; background: #0e1315; @@ -1708,15 +1864,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #2d3e44; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - border-color: #9eade6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1724,36 +1872,73 @@ transition-duration: 0.3s; background-color: #121212; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9eade6; background: #9eade6; } - .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: #2d3e44; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #7f93de; background: #7f93de; - color: #121212; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #121212; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f78c79; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #263238; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #9eade6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #263238; } - .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: #7f93de; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #263238; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #9eade6; } - .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: #263238; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #7f93de; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1766,7 +1951,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -1976,44 +2161,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #263238; } - .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: 2px solid #263238; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #161d21; border: 2px solid #263238; color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(158, 173, 230, 0.08); - border-color: #263238; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.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: rgba(158, 173, 230, 0.16); border-color: rgba(158, 173, 230, 0.16); color: #9eade6; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #9eade6; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: rgba(158, 173, 230, 0.24); border-color: rgba(158, 173, 230, 0.24); color: #9eade6; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #9eade6; } - .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 #9eade6; + border-color: #9eade6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f78c79; } .p-button { @@ -2463,6 +2682,54 @@ border-color: transparent; color: #e693a9; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #0e1315; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #cfd0d0; + color: #0e1315; + border-color: #cfd0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b7b8b9; + color: #0e1315; + border-color: #b7b8b9; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #7f93de; background: transparent; @@ -6240,6 +6507,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-metergroup .p-metergroup-meter-container { + background: #263238; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9eade6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #9eade6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 6cd951e990..876283887a 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -748,8 +748,56 @@ background-color: #f2f2f2; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #e1e1e1; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #e1e1e1; + background: #ffffff; width: 20px; height: 20px; + color: #6c6c6c; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.3s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #e1e1e1; @@ -759,6 +807,7 @@ color: #6c6c6c; border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -769,42 +818,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #5472d4; background: #5472d4; } - .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: #cecece; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #3c5ece; background: #3c5ece; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #cecece; - } - .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.1rem #bbc7ee; border-color: #91a4e3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3c5ece; - background: #3c5ece; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f88c79; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f2f2; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #5472d4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f2f2; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3c5ece; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f2f2; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { + background: #5472d4; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f2f2; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3c5ece; + } + .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: #f2f2f2; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #5472d4; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f2f2f2; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #3c5ece; } .p-chips { @@ -1172,14 +1254,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } + .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: 6px; + } .p-inputswitch .p-inputswitch-slider { background: #cecece; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1190,27 +1308,25 @@ border-radius: 6px; transition-duration: 0.3s; } - .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.1rem #bbc7ee; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b9b9b9; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #5472d4; } - .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: #b9b9b9; } - .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: #4868d1; } - .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.1rem #bbc7ee; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f88c79; } .p-inputtext { @@ -1696,10 +1812,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #8bae2c; } + .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 #e1e1e1; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #e1e1e1; background: #ffffff; @@ -1708,15 +1864,7 @@ color: #6c6c6c; border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #cecece; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - border-color: #91a4e3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1724,36 +1872,73 @@ transition-duration: 0.3s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #5472d4; background: #5472d4; } - .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: #cecece; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3c5ece; background: #3c5ece; - 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.1rem #bbc7ee; + border-color: #91a4e3; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f88c79; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f2f2f2; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #5472d4; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f2f2f2; } - .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: #3c5ece; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f2f2; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #5472d4; } - .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: #f2f2f2; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #3c5ece; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1766,7 +1951,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -1976,44 +2161,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } - .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: 2px solid #e1e1e1; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 2px solid #e1e1e1; color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #898989; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #edf0fa; - border-color: #e1e1e1; - color: #6c6c6c; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #898989; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ced6f1; border-color: #ced6f1; color: #585858; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #585858; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #edf0fa; + border-color: #e1e1e1; + color: #6c6c6c; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #898989; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #bdc7ec; border-color: #bdc7ec; color: #585858; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #585858; } - .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.1rem #bbc7ee; + border-color: #91a4e3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f88c79; } .p-button { @@ -2463,6 +2682,54 @@ border-color: transparent; color: #d45472; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #3b3b3b; + border: 1px solid #3b3b3b; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #585858; + color: #ffffff; + border-color: #585858; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #6c6c6c; + color: #ffffff; + border-color: #6c6c6c; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #3b3b3b; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(59, 59, 59, 0.04); + color: #3b3b3b; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(59, 59, 59, 0.16); + color: #3b3b3b; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #3b3b3b; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(59, 59, 59, 0.04); + border-color: transparent; + color: #3b3b3b; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(59, 59, 59, 0.16); + border-color: transparent; + color: #3b3b3b; + } .p-button.p-button-link { color: #3c5ece; background: transparent; @@ -6240,6 +6507,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-metergroup .p-metergroup-meter-container { + background: #ebebeb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #5472d4; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #5472d4; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; From 3bcc2b62dc075f2e019ffb1b10a19befa8f0ec1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Mon, 11 Mar 2024 17:42:29 +0300 Subject: [PATCH 25/31] Updated metergroup d ts --- components/doc/metergroup/templatedoc.js | 29 +- components/lib/metergroup/MeterGroup.js | 12 +- components/lib/metergroup/MeterGroupBase.js | 4 +- components/lib/metergroup/metergroup.d.ts | 15 +- public/themes/arya-blue/theme.css | 735 +++++++++++--- public/themes/arya-green/theme.css | 735 +++++++++++--- public/themes/arya-orange/theme.css | 735 +++++++++++--- public/themes/arya-purple/theme.css | 32 +- public/themes/bootstrap4-dark-blue/theme.css | 777 ++++++++++++--- .../themes/bootstrap4-dark-purple/theme.css | 32 +- public/themes/bootstrap4-light-blue/theme.css | 777 ++++++++++++--- .../themes/bootstrap4-light-purple/theme.css | 32 +- public/themes/fluent-light/theme.css | 727 +++++++++++--- public/themes/lara-dark-amber/theme.css | 783 ++++++++++++--- public/themes/lara-dark-blue/theme.css | 783 ++++++++++++--- public/themes/lara-dark-cyan/theme.css | 783 ++++++++++++--- public/themes/lara-dark-green/theme.css | 783 ++++++++++++--- public/themes/lara-dark-indigo/theme.css | 783 ++++++++++++--- public/themes/lara-dark-pink/theme.css | 783 ++++++++++++--- public/themes/lara-dark-purple/theme.css | 32 +- public/themes/lara-dark-teal/theme.css | 783 ++++++++++++--- public/themes/lara-light-amber/theme.css | 783 ++++++++++++--- public/themes/lara-light-blue/theme.css | 783 ++++++++++++--- public/themes/lara-light-cyan/theme.css | 783 ++++++++++++--- public/themes/lara-light-green/theme.css | 783 ++++++++++++--- public/themes/lara-light-indigo/theme.css | 783 ++++++++++++--- public/themes/lara-light-pink/theme.css | 783 ++++++++++++--- public/themes/lara-light-purple/theme.css | 32 +- public/themes/lara-light-teal/theme.css | 783 ++++++++++++--- public/themes/luna-amber/theme.css | 735 +++++++++++--- public/themes/luna-blue/theme.css | 735 +++++++++++--- public/themes/luna-green/theme.css | 735 +++++++++++--- public/themes/luna-pink/theme.css | 735 +++++++++++--- public/themes/md-dark-deeppurple/theme.css | 932 +++++++++++++++--- public/themes/md-dark-indigo/theme.css | 804 ++++++++++++--- public/themes/md-light-deeppurple/theme.css | 882 ++++++++++++++--- public/themes/md-light-indigo/theme.css | 808 ++++++++++++--- public/themes/mdc-dark-deeppurple/theme.css | 932 +++++++++++++++--- public/themes/mdc-dark-indigo/theme.css | 804 ++++++++++++--- public/themes/mdc-light-deeppurple/theme.css | 882 ++++++++++++++--- public/themes/mdc-light-indigo/theme.css | 808 ++++++++++++--- public/themes/mira/theme.css | 735 +++++++++++--- public/themes/nano/theme.css | 735 +++++++++++--- public/themes/nova-accent/theme.css | 735 +++++++++++--- public/themes/nova-alt/theme.css | 735 +++++++++++--- public/themes/nova/theme.css | 735 +++++++++++--- public/themes/rhea/theme.css | 733 +++++++++++--- public/themes/saga-blue/theme.css | 735 +++++++++++--- public/themes/saga-green/theme.css | 735 +++++++++++--- public/themes/saga-orange/theme.css | 735 +++++++++++--- public/themes/saga-purple/theme.css | 32 +- public/themes/soho-dark/theme.css | 783 ++++++++++++--- public/themes/soho-light/theme.css | 783 ++++++++++++--- public/themes/tailwind-light/theme.css | 740 +++++++++++--- public/themes/vela-blue/theme.css | 735 +++++++++++--- public/themes/vela-green/theme.css | 735 +++++++++++--- public/themes/vela-orange/theme.css | 735 +++++++++++--- public/themes/vela-purple/theme.css | 32 +- public/themes/viva-dark/theme.css | 783 ++++++++++++--- public/themes/viva-light/theme.css | 783 ++++++++++++--- 60 files changed, 31790 insertions(+), 6424 deletions(-) diff --git a/components/doc/metergroup/templatedoc.js b/components/doc/metergroup/templatedoc.js index e246e18fa5..2680477e05 100644 --- a/components/doc/metergroup/templatedoc.js +++ b/components/doc/metergroup/templatedoc.js @@ -14,12 +14,12 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function TemplateDemo() { - const meterRenderer = (props, attr) => ; + const meter = (props, attr) => ; - const labelListRenderer = ({ values }) => ( + const labelList = ({ values }) => (
    {values.map((item, index) => ( - +
    {item.label} @@ -55,12 +55,12 @@ export default function TemplateDemo() { { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, - { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meterRenderer } + { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meter } ]; return (
    - +
    ) } @@ -70,7 +70,7 @@ import React, { useEffect, useRef } from 'react'; import { MeterGroup } from 'primereact/metergroup'; export default function TemplateDemo() { - const meterRenderer = (props: any, attr: any) => ( + const meter = (props: any, attr: any) => ( ); - const labelListRenderer = ({ values }: {values: any[]}) => ( + const labelList = ({ values }: {values: any[]}) => (
    {values.map((item, index) => (
    @@ -154,25 +153,25 @@ export default function TemplateDemo() { color2: '#c084fc', value: 10, icon: 'pi pi-cog', - meterTemplate: meterRenderer, + meterTemplate: meter, }, ]; return (
    - +
    ) } ` }; - const meterRenderer = (props, attr) => ; + const meter = (props, attr) => ; - const labelListRenderer = ({ values }) => ( + const labelList = ({ values }) => (
    {values.map((item, index) => ( - +
    {item.label} @@ -208,7 +207,7 @@ export default function TemplateDemo() { { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, - { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meterRenderer } + { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meter } ]; return ( @@ -219,7 +218,7 @@ export default function TemplateDemo() {

    - +
    diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js index 99349e589a..6960f187fd 100644 --- a/components/lib/metergroup/MeterGroup.js +++ b/components/lib/metergroup/MeterGroup.js @@ -8,7 +8,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase'; export const MeterGroup = (inProps) => { const context = useContext(PrimeReactContext); const props = MeterGroupBase.getProps(inProps, context); - const { values, min, max, orientation, labelPosition, start, end, meterRenderer, labelListRenderer } = props; + const { values, min, max, orientation, labelPosition, start, end, meter, labelList } = props; const mergeProps = useMergeProps(); const { ptm, cx, isUnstyled } = MeterGroupBase.setMetaData({ @@ -29,8 +29,8 @@ export const MeterGroup = (inProps) => { precentages.push(Math.round((item.value / totalPercent) * 100)); }); - const calculatePercentage = (meter = 0) => { - const percentageOfItem = ((meter - min) / (max - min)) * 100; + const calculatePercentage = (meterValue = 0) => { + const percentageOfItem = ((meterValue - min) / (max - min)) * 100; return Math.round(Math.max(0, Math.min(100, percentageOfItem))); }; @@ -60,7 +60,7 @@ export const MeterGroup = (inProps) => { ptm('meter') ); - if (meterRenderer || item.meterTemplate) { + if (meter || item.meterTemplate) { const meterTemplateProps = mergeProps( { className: cx('meter') @@ -68,7 +68,7 @@ export const MeterGroup = (inProps) => { ptm('meter') ); - return ObjectUtils.getJSXElement(item.meterTemplate || meterRenderer, { ...item, percentage: calculatedPercantage, index }, meterTemplateProps); + return ObjectUtils.getJSXElement(item.meterTemplate || meter, { ...item, percentage: calculatedPercantage, index }, meterTemplateProps); } else { return ; } @@ -146,7 +146,7 @@ export const MeterGroup = (inProps) => { values }; - const labelElement = ObjectUtils.getJSXElement(labelListRenderer || createLabelList, { values, totalPercent }); + const labelElement = ObjectUtils.getJSXElement(labelList || createLabelList, { values, totalPercent }); return (
    diff --git a/components/lib/metergroup/MeterGroupBase.js b/components/lib/metergroup/MeterGroupBase.js index 9aefb0b5b4..3815e8ef46 100644 --- a/components/lib/metergroup/MeterGroupBase.js +++ b/components/lib/metergroup/MeterGroupBase.js @@ -86,8 +86,8 @@ export const MeterGroupBase = ComponentBase.extend({ labelOrientation: 'horizontal', start: null, end: null, - meterRenderer: null, - labelListRenderer: null + meter: null, + labelList: null }, css: { classes, diff --git a/components/lib/metergroup/metergroup.d.ts b/components/lib/metergroup/metergroup.d.ts index a4337bfea4..3c270885df 100644 --- a/components/lib/metergroup/metergroup.d.ts +++ b/components/lib/metergroup/metergroup.d.ts @@ -134,7 +134,16 @@ interface MeterGroupProps { * @defaultValue 'horizontal' */ labelOrientation?: 'horizontal' | 'vertical'; - + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {MeterGroupPassThroughOptions} + */ + pt?: MeterGroupPassThroughOptions; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; /** * A function to render custom start label. * @param {CustomRenderProps} prop - Custom Render Props @@ -151,13 +160,13 @@ interface MeterGroupProps { * A function to render a custom meter. * @param {CustomRenderProps} prop - Custom Render Props */ - meterRenderer?: (props: CustomRenderProps) => ReactNode; + meter?: (props: CustomRenderProps) => ReactNode; /** * A function to render a custom label list. * @param {CustomRenderProps} prop - Custom Render Props */ - labelListRenderer?: (props: CustomRenderProps) => ReactNode; + labelList?: (props: CustomRenderProps) => ReactNode; } /** diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 2f7c45e64b..c375c85e1f 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -722,8 +722,56 @@ background-color: #383838; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; width: 20px; height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #383838; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #2396f2; background: #2396f2; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #64b5f6; - } - .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 #93cbf9; border-color: #64b5f6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #2396f2; - background: #2396f2; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #64b5f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2396f2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #64b5f6; } - .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: #2396f2; } - .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: #64b5f6; + } + .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: #2396f2; + } + .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: #64b5f6; } - .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 #93cbf9; border-color: #64b5f6; } + .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(100, 181, 246, 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 +958,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: #64b5f6; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .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 +1074,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 +1116,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 +1128,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(100, 181, 246, 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(100, 181, 246, 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 +1162,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 +1228,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 +1282,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 #93cbf9; - } - .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: #64b5f6; } - .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: #43a5f4; } - .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 #93cbf9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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(100, 181, 246, 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 #93cbf9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 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 #93cbf9; + border-color: #64b5f6; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1529,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 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: #64b5f6; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } - .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 +1666,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 +1688,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 +1695,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 +1730,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(100, 181, 246, 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(100, 181, 246, 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 #93cbf9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #64b5f6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64b5f6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #2396f2; background: #2396f2; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; } .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: #64b5f6; + } + .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: #2396f2; + } + .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: #64b5f6; } - .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: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -1692,44 +2135,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: #64b5f6; border-color: #64b5f6; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #43a5f4; border-color: #43a5f4; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #93cbf9; + border-color: #64b5f6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 3f964565d2..e20c2bafd6 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -722,8 +722,56 @@ background-color: #383838; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; width: 20px; height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #383838; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #54b358; background: #54b358; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81c784; - } - .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 #a7d8a9; border-color: #81c784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #54b358; - background: #54b358; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81c784; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #54b358; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #81c784; } - .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: #54b358; } - .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: #81c784; + } + .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: #54b358; + } + .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: #81c784; } - .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 #a7d8a9; border-color: #81c784; } + .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(129, 199, 132, 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 +958,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: #81c784; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .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 +1074,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 +1116,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 +1128,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(129, 199, 132, 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(129, 199, 132, 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 +1162,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 +1228,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 +1282,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 #a7d8a9; - } - .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: #81c784; } - .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: #6abd6e; } - .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 #a7d8a9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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(129, 199, 132, 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 #a7d8a9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 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 #a7d8a9; + border-color: #81c784; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1529,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 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: #81c784; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } - .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 +1666,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 +1688,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 +1695,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 +1730,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(129, 199, 132, 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(129, 199, 132, 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 #a7d8a9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #81c784; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81c784; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #54b358; background: #54b358; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; } .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: #81c784; + } + .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: #54b358; + } + .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: #81c784; } - .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: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -1692,44 +2135,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: #81c784; border-color: #81c784; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #6abd6e; border-color: #6abd6e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #a7d8a9; + border-color: #81c784; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index a818541157..7773af6477 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -722,8 +722,56 @@ background-color: #383838; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; width: 20px; height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #383838; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ffc50c; background: #ffc50c; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffd54f; - } - .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 #ffe284; border-color: #ffd54f; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffc50c; - background: #ffc50c; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffd54f; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffc50c; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ffd54f; } - .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: #ffc50c; } - .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: #ffd54f; + } + .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: #ffc50c; + } + .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: #ffd54f; } - .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 #ffe284; border-color: #ffd54f; } + .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(255, 213, 79, 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 +958,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: #ffd54f; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .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 +1074,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 +1116,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 +1128,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(255, 213, 79, 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(255, 213, 79, 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 +1162,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 +1228,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 +1282,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 #ffe284; - } - .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: #ffd54f; } - .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: #ffcd2e; } - .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 #ffe284; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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(255, 213, 79, 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 #ffe284; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 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 #ffe284; + border-color: #ffd54f; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1529,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 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: #ffd54f; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } - .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 +1666,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 +1688,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 +1695,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 +1730,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(255, 213, 79, 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(255, 213, 79, 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 #ffe284; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #ffd54f; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #ffd54f; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ffc50c; background: #ffc50c; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; } .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: #ffd54f; + } + .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: #ffc50c; + } + .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: #ffd54f; } - .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: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -1692,44 +2135,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: #ffd54f; border-color: #ffd54f; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #ffcd2e; border-color: #ffcd2e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #ffe284; + border-color: #ffd54f; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index 4524f26c3f..df168d53fa 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #cf95d9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #383838; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 97256bfda4..e48a24f07b 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -721,10 +721,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 1px solid #3f4b5b; + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 1px solid #3f4b5b; background: #20262e; @@ -733,6 +762,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -743,67 +773,162 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #3f4b5b; + background: #20262e; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.15s; + color: #151515; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #8dd0ff; background: #8dd0ff; } - .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: #3f4b5b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #1dadff; background: #1dadff; color: #151515; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #3f4b5b; - } - .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 #e3f3fe; border-color: #8dd0ff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #1dadff; - background: #1dadff; - color: #151515; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f19ea6; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #8dd0ff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1dadff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3f4b5b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #8dd0ff; } - .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: #3f4b5b; } - .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: #1dadff; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #8dd0ff; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3f4b5b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1dadff; + } + .p-chips { + display: inline-flex; + } + .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: #3f4b5b; } - .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 #e3f3fe; border-color: #8dd0ff; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: #8dd0ff; + background: #3f4b5b; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #4c5866; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: none; } + .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: #20262e; border: 1px solid #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #3f4b5b; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + .p-dropdown.p-variant-filled { + background: #3f4b5b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -861,7 +1077,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; } @@ -903,13 +1119,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -922,14 +1131,28 @@ transition: box-shadow 0.15s; 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: #151515; background: #8dd0ff; } - .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: #64bfff; + } + .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.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -942,18 +1165,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #3f4b5b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #3f4b5b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #3f4b5b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .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: 4px; + } .p-inputswitch .p-inputswitch-slider { background: #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1038,27 +1285,25 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #8dd0ff; } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #151515; + transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #3f4b5b; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #8dd0ff; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #151515; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #8dd0ff; + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f19ea6; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); border: 1px solid #3f4b5b; border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.5rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: box-shadow 0.15s; 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: #151515; background: #8dd0ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1205,10 +1481,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #64bfff; + } + .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.04); + } .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.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } .p-listbox.p-invalid { border-color: #f19ea6; } @@ -1239,11 +1532,100 @@ color: #151515; background: #8dd0ff; } + .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: #20262e; border: 1px solid #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #3f4b5b; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3f4b5b; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f19ea6; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1313,9 +1691,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1323,7 +1698,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1354,19 +1733,23 @@ transition: box-shadow 0.15s; 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: #151515; background: #8dd0ff; } - .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: #64bfff; + } + .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.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #3f4b5b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #3f4b5b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #3f4b5b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #9fdaa8; } + .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: 1px solid #3f4b5b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #3f4b5b; background: #20262e; @@ -1427,15 +1841,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3f4b5b; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; - border-color: #8dd0ff; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.15s; background-color: #151515; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #8dd0ff; background: #8dd0ff; } - .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: #3f4b5b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #1dadff; background: #1dadff; - color: #151515; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #151515; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f19ea6; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #3f4b5b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #8dd0ff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #3f4b5b; } - .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: #1dadff; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3f4b5b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #8dd0ff; } - .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: #3f4b5b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #1dadff; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } - .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 #6c757d; + border-radius: 4px; + } + .p-togglebutton .p-button { background: #6c757d; border: 1px solid #6c757d; color: #ffffff; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; + .p-togglebutton.p-highlight .p-button { + background: #545b62; + border-color: #4e555b; color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-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 { - background: #545b62; - border-color: #4e555b; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #5a6268; + border-color: #545b62; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #545b62; border-color: #4e555b; 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 #e3f3fe; + border-color: #8dd0ff; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f19ea6; } .p-button { @@ -2188,6 +2665,54 @@ border-color: transparent; color: #f19ea6; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #20262e; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d2d4d5; + color: #20262e; + border-color: #d2d4d5; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #bcbec0; + color: #20262e; + border-color: #bcbec0; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #8dd0ff; background: transparent; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 33453f0894..73ca072706 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + border-color: #c298d8; + } .p-datepicker { padding: 0; background: #2a323d; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #f0e6f5; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f19ea6; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #3f4b5b; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index faf3100450..67294f0743 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -721,10 +721,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #efefef; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #ced4da; + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #ced4da; + background: #ffffff; + width: 20px; + height: 20px; + color: #212529; + border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.15s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -733,6 +781,7 @@ color: #212529; border-radius: 4px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.15s; @@ -743,67 +792,143 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007bff; background: #007bff; } - .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: #ced4da; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0062cc; background: #0062cc; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ced4da; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0062cc; - background: #0062cc; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #dc3545; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007bff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #efefef; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0062cc; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #efefef; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007bff; } - .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: #efefef; } - .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: #0062cc; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007bff; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #efefef; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0062cc; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #ced4da; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: #007bff; + background: #dee2e6; color: #212529; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #ced4da; + color: #212529; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: none; } + .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.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ced4da; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .p-dropdown.p-variant-filled { + background: #efefef; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -861,7 +1077,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; } @@ -903,13 +1119,6 @@ right: 0.75rem; color: #495057; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -922,14 +1131,28 @@ transition: box-shadow 0.15s; 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: #ffffff; background: #007bff; } - .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: #0067d6; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; 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; @@ -942,18 +1165,6 @@ color: #212529; background: transparent; } - .p-input-filled .p-dropdown { - background: #efefef; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #efefef; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #efefef; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .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: 4px; + } .p-inputswitch .p-inputswitch-slider { background: #ced4da; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1038,27 +1285,25 @@ border-radius: 4px; transition-duration: 0.15s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #007bff; } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #ced4da; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #007bff; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #ffffff; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #007bff; + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #dc3545; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #212529; border: 1px solid #ced4da; border-radius: 4px; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.5rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: box-shadow 0.15s; 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: #ffffff; background: #007bff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1205,10 +1481,27 @@ color: #212529; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #0067d6; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #212529; + background: #e9ecef; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #212529; background: #e9ecef; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #212529; + background: #e9ecef; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; + } .p-listbox.p-invalid { border-color: #dc3545; } @@ -1239,11 +1532,100 @@ color: #ffffff; background: #007bff; } + .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.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ced4da; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #efefef; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: #495057; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #dc3545; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #212529; @@ -1313,9 +1691,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1323,7 +1698,11 @@ right: 0.75rem; color: #495057; } + .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; @@ -1354,19 +1733,23 @@ transition: box-shadow 0.15s; 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: #ffffff; background: #007bff; } - .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: #0067d6; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #212529; 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 rgba(38, 143, 255, 0.5); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: #212529; background: transparent; } - .p-input-filled .p-multiselect { - background: #efefef; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #efefef; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #efefef; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #28a745; } + .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; @@ -1427,15 +1841,7 @@ color: #212529; border-radius: 50%; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ced4da; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); - border-color: #007bff; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.15s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007bff; background: #007bff; } - .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: #ced4da; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0062cc; background: #0062cc; - 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 rgba(38, 143, 255, 0.5); + border-color: #007bff; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #dc3545; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #efefef; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007bff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #efefef; } - .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: #0062cc; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #efefef; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007bff; } - .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: #efefef; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0062cc; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #efefef; } - .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 #6c757d; + border-radius: 4px; + } + .p-togglebutton .p-button { background: #6c757d; border: 1px solid #6c757d; color: #ffffff; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #5a6268; - border-color: #545b62; + .p-togglebutton.p-highlight .p-button { + background: #545b62; + border-color: #4e555b; color: #ffffff; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-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 { - background: #545b62; - border-color: #4e555b; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #5a6268; + border-color: #545b62; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #545b62; border-color: #4e555b; 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 rgba(38, 143, 255, 0.5); + border-color: #007bff; + } + .p-togglebutton.p-invalid > .p-button { border-color: #dc3545; } .p-button { @@ -2188,6 +2665,54 @@ border-color: transparent; color: #dc3545; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212529; + border: 1px solid #212529; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #343a40; + color: #ffffff; + border-color: #343a40; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #495057; + color: #ffffff; + border-color: #495057; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212529; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + border-color: transparent; + color: #212529; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + border-color: transparent; + color: #212529; + } .p-button.p-button-link { color: #007bff; background: transparent; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 25d20c8b78..5eac14ec25 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); + border-color: #883cae; + } .p-datepicker { padding: 0; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1466,9 +1473,26 @@ .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; @@ -1481,7 +1505,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #dc3545; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -2874,10 +2898,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: 1px solid #dee2e6; - border-width: 1px 0 0 0; - } .p-dataview .p-dataview-footer { background: #efefef; color: #212529; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index f42c25da66..e76f218683 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -722,8 +722,56 @@ background-color: #faf9f8; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #605e5c; + border-radius: 2px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #605e5c; + background: #ffffff; width: 20px; height: 20px; + color: #323130; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #605e5c; @@ -733,6 +781,7 @@ color: #323130; border-radius: 2px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,57 +792,129 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #0078d4; background: #0078d4; } - .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: #323130; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005a9e; background: #005a9e; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #323130; - } - .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: inset 0 0 0 1px #605e5c; border-color: #0078d4; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005a9e; - background: #005a9e; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a4252c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #faf9f8; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #0078d4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #faf9f8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005a9e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #faf9f8; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #0078d4; } - .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: #faf9f8; } - .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: #005a9e; } - .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-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #faf9f8; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #0078d4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #faf9f8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005a9e; + } + .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: #323130; } - .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: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .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; @@ -801,6 +922,10 @@ color: #323130; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e1dfdd; + color: #323130; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +958,90 @@ .p-colorpicker-overlay-panel { box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; } + .p-dropdown { + 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 #605e5c; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #323130; @@ -848,6 +1052,18 @@ box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .p-dropdown.p-variant-filled { + background: #faf9f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #faf9f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #faf9f8; + } + .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 +1074,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #605e5c; } - .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 +1116,6 @@ right: 0.5rem; color: #605e5c; } - .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; } @@ -919,14 +1128,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: #323130; background: #edebe9; } - .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: #e1dfdd; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #323130; background: #f3f2f1; } + .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 0.5rem; @@ -939,18 +1162,6 @@ color: #323130; background: transparent; } - .p-input-filled .p-dropdown { - background: #faf9f8; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #faf9f8; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #faf9f8; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1017,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } + .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: #ffffff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #605e5c; @@ -1035,27 +1282,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: inset 0 0 0 1px #605e5c; + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #0078d4; } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { - background: #0078d4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #ffffff; } - .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: #005a9e; } - .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: inset 0 0 0 1px #605e5c; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a4252c; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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: #323130; border: 1px solid #605e5c; border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 0.5rem; @@ -1172,6 +1446,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1456,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: #323130; background: #edebe9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 0.5rem; @@ -1202,10 +1478,27 @@ color: #323130; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #e1dfdd; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #323130; + background: #f3f2f1; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #323130; background: #f3f2f1; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #323130; + background: #f3f2f1; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } .p-listbox.p-invalid { border-color: #a4252c; } @@ -1236,11 +1529,100 @@ color: #323130; background: #edebe9; } + .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 #605e5c; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #323130; @@ -1251,8 +1633,14 @@ box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #faf9f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #faf9f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #faf9f8; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1278,22 +1666,12 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } - .p-multiselect .p-multiselect-clear-icon { - color: #605e5c; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a4252c; } .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: #323130; @@ -1310,9 +1688,6 @@ border-top-right-radius: 2px; border-top-left-radius: 2px; } - .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 +1695,11 @@ right: 0.5rem; color: #605e5c; } + .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: #605e5c; @@ -1351,19 +1730,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: #323130; background: #edebe9; } - .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: #e1dfdd; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #323130; background: #f3f2f1; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,6 @@ color: #323130; background: transparent; } - .p-input-filled .p-multiselect { - background: #faf9f8; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #faf9f8; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #faf9f8; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } @@ -1412,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #498205; } + .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: 1px solid #605e5c; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #605e5c; background: #ffffff; @@ -1424,15 +1838,7 @@ color: #323130; 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: #323130; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 1px #605e5c; - border-color: #0078d4; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #0078d4; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #0078d4; background: #ffffff; } - .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: #323130; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005a9e; background: #ffffff; - color: #005a9e; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #005a9e; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a4252c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #faf9f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #faf9f8; } - .p-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: #ffffff; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #faf9f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffffff; } - .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: #faf9f8; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #323130; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #a4252c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -1692,44 +2135,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } - .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 #605e5c; + border-radius: 2px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #605e5c; color: #323130; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #605e5c; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f2f1; + .p-togglebutton.p-highlight .p-button { + background: #edebe9; border-color: #605e5c; color: #323130; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #605e5c; + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { + color: #323130; } - .p-togglebutton.p-button.p-highlight { - background: #edebe9; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f2f1; border-color: #605e5c; color: #323130; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: #323130; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #605e5c; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #edebe9; border-color: #605e5c; color: #323130; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #323130; } - .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: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a4252c; } .p-button { diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 1dcaf2d7d1..48b9d0134d 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -738,10 +738,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +798,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +809,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #fbbf24; background: #fbbf24; } - .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: #fbbf24; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #fde68a; background: #fde68a; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #fbbf24; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #fde68a; - background: #fde68a; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #fbbf24; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fde68a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #fbbf24; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #fde68a; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #fbbf24; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fde68a; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #fbbf24; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(251, 191, 36, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #fbbf24; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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(251, 191, 36, 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(251, 191, 36, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #fbbf24; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #fcd34d; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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(251, 191, 36, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(251, 191, 36, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1546,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(251, 191, 36, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #fbbf24; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); border-color: #fbbf24; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1747,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(251, 191, 36, 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(251, 191, 36, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1855,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: #fbbf24; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); - border-color: #fbbf24; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #fbbf24; background: #fbbf24; } - .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: #fbbf24; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #fde68a; background: #fde68a; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #fbbf24; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #fde68a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #fbbf24; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #fde68a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); @@ -1709,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #fbbf24; border-color: #fbbf24; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #fcd34d; border-color: #fcd34d; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + border-color: #fbbf24; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #fbbf24; background: transparent; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index a9163fb5d6..7df0f72dc6 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -738,10 +738,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +798,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +809,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #60a5fa; background: #60a5fa; } - .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: #60a5fa; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #bfdbfe; background: #bfdbfe; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #60a5fa; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #bfdbfe; - background: #bfdbfe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #60a5fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #bfdbfe; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #60a5fa; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #bfdbfe; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #60a5fa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #bfdbfe; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #60a5fa; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(96, 165, 250, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #60a5fa; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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(96, 165, 250, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(96, 165, 250, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #60a5fa; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #93c5fd; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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(96, 165, 250, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(96, 165, 250, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1546,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(96, 165, 250, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #60a5fa; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1747,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(96, 165, 250, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(96, 165, 250, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1855,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: #60a5fa; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); - border-color: #60a5fa; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #60a5fa; background: #60a5fa; } - .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: #60a5fa; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #bfdbfe; background: #bfdbfe; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #60a5fa; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #bfdbfe; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #60a5fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #bfdbfe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -1709,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #60a5fa; border-color: #60a5fa; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #93c5fd; border-color: #93c5fd; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #60a5fa; background: transparent; diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index e4cce90cb3..6db191bef9 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -738,10 +738,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +798,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +809,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #22d3ee; background: #22d3ee; } - .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: #22d3ee; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a5f3fc; background: #a5f3fc; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #22d3ee; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a5f3fc; - background: #a5f3fc; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #22d3ee; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a5f3fc; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #22d3ee; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a5f3fc; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #22d3ee; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a5f3fc; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #22d3ee; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(34, 211, 238, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #22d3ee; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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(34, 211, 238, 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(34, 211, 238, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #22d3ee; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #67e8f9; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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(34, 211, 238, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(34, 211, 238, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1546,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(34, 211, 238, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #22d3ee; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); border-color: #22d3ee; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1747,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(34, 211, 238, 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(34, 211, 238, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1855,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: #22d3ee; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); - border-color: #22d3ee; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #22d3ee; background: #22d3ee; } - .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: #22d3ee; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a5f3fc; background: #a5f3fc; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #22d3ee; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a5f3fc; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #22d3ee; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a5f3fc; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); @@ -1709,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #22d3ee; border-color: #22d3ee; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #67e8f9; border-color: #67e8f9; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + border-color: #22d3ee; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #22d3ee; background: transparent; diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index c574254896..f5bcae8f46 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -738,10 +738,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +798,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +809,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #34d399; background: #34d399; } - .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: #34d399; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a7f3d0; background: #a7f3d0; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #34d399; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a7f3d0; - background: #a7f3d0; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #34d399; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a7f3d0; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #34d399; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a7f3d0; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #34d399; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a7f3d0; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #34d399; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(52, 211, 153, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #34d399; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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(52, 211, 153, 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(52, 211, 153, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #34d399; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #6ee7b7; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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(52, 211, 153, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(52, 211, 153, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1546,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(52, 211, 153, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #34d399; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); border-color: #34d399; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1747,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(52, 211, 153, 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(52, 211, 153, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1855,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: #34d399; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); - border-color: #34d399; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #34d399; background: #34d399; } - .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: #34d399; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a7f3d0; background: #a7f3d0; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #34d399; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a7f3d0; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #34d399; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a7f3d0; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); @@ -1709,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #34d399; border-color: #34d399; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #6ee7b7; border-color: #6ee7b7; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + border-color: #34d399; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #34d399; background: transparent; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 26bfc0bfb3..19f6e81946 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -738,10 +738,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +798,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +809,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #818cf8; background: #818cf8; } - .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: #818cf8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #c7d2fe; background: #c7d2fe; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #818cf8; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #c7d2fe; - background: #c7d2fe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #818cf8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #c7d2fe; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #818cf8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #c7d2fe; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #818cf8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #c7d2fe; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #818cf8; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(129, 140, 248, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #818cf8; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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(129, 140, 248, 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(129, 140, 248, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #818cf8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #a5b4fc; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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(129, 140, 248, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 140, 248, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1546,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 140, 248, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #818cf8; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1747,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(129, 140, 248, 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(129, 140, 248, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1855,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: #818cf8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); - border-color: #818cf8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #818cf8; background: #818cf8; } - .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: #818cf8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #c7d2fe; background: #c7d2fe; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #818cf8; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #c7d2fe; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #818cf8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #c7d2fe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -1709,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #818cf8; border-color: #818cf8; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #a5b4fc; border-color: #a5b4fc; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + border-color: #818cf8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #818cf8; background: transparent; diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 03ba5a0b65..d39ed66f36 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -738,10 +738,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +798,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +809,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #f472b6; background: #f472b6; } - .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: #f472b6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #fbcfe8; background: #fbcfe8; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #f472b6; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #fbcfe8; - background: #fbcfe8; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f472b6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fbcfe8; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #f472b6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #fbcfe8; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f472b6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fbcfe8; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #f472b6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(244, 114, 182, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #f472b6; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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(244, 114, 182, 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(244, 114, 182, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #f472b6; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #f9a8d4; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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(244, 114, 182, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(244, 114, 182, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1546,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(244, 114, 182, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #f472b6; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); border-color: #f472b6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1747,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(244, 114, 182, 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(244, 114, 182, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1855,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: #f472b6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); - border-color: #f472b6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #f472b6; background: #f472b6; } - .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: #f472b6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #fbcfe8; background: #fbcfe8; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #f472b6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #fbcfe8; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #f472b6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #fbcfe8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); @@ -1709,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #f472b6; border-color: #f472b6; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #f9a8d4; border-color: #f9a8d4; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + border-color: #f472b6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #f472b6; background: transparent; diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index e749f66253..68054af94e 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + border-color: #a78bfa; + } .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ddd6fe; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #424b57; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2937; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index 251bf4478b..57df1cba15 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -738,10 +738,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +798,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +809,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #2dd4bf; background: #2dd4bf; } - .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: #2dd4bf; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #99f6e4; background: #99f6e4; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #2dd4bf; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #99f6e4; - background: #99f6e4; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #2dd4bf; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #99f6e4; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #2dd4bf; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #99f6e4; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #2dd4bf; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #99f6e4; + } + .p-chips { + display: inline-flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .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: #2dd4bf; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(45, 212, 191, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #2dd4bf; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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(45, 212, 191, 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(45, 212, 191, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1299,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #2dd4bf; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; } - .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: #5eead4; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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(45, 212, 191, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(45, 212, 191, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1546,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(45, 212, 191, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #2dd4bf; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1747,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(45, 212, 191, 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(45, 212, 191, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1855,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: #2dd4bf; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); - border-color: #2dd4bf; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #2dd4bf; background: #2dd4bf; } - .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: #2dd4bf; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #99f6e4; background: #99f6e4; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #2dd4bf; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #99f6e4; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #2dd4bf; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #99f6e4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -1709,44 +2152,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } - .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 #424b57; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #2dd4bf; border-color: #2dd4bf; color: #030712; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #5eead4; border-color: #5eead4; color: #030712; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + border-color: #2dd4bf; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #2dd4bf; background: transparent; diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index e0a3eab31c..5eeaf852c6 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +779,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +790,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #f59e0b; background: #f59e0b; } - .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: #f59e0b; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #b45309; background: #b45309; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #f59e0b; - } - .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 #fef08a; border-color: #f59e0b; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #b45309; - background: #b45309; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f59e0b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #b45309; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #f59e0b; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #b45309; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f59e0b; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #b45309; + } + .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: #f59e0b; } - .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 #fef08a; border-color: #f59e0b; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #fffbeb; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #f59e0b; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem #fef08a; border-color: #f59e0b; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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: #b45309; background: #fffbeb; } - .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(245, 158, 11, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1299,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 #fef08a; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #f59e0b; } - .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: #b7bcc5; } - .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: #d97706; } - .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 #fef08a; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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: #b45309; background: #fffbeb; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fef08a; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(245, 158, 11, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + border-color: #f59e0b; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1546,100 @@ color: #b45309; background: #fffbeb; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #f59e0b; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem #fef08a; border-color: #f59e0b; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1747,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: #b45309; background: #fffbeb; } - .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(245, 158, 11, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fef08a; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #f59e0b; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #fef08a; - border-color: #f59e0b; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #f59e0b; background: #f59e0b; } - .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: #f59e0b; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #b45309; background: #b45309; - 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 #fef08a; + border-color: #f59e0b; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #f59e0b; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #b45309; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #f59e0b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #b45309; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; @@ -1709,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #f59e0b; border-color: #f59e0b; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d97706; border-color: #d97706; 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 #fef08a; + border-color: #f59e0b; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #b45309; background: transparent; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 2d9b47c9d1..c7bcabc7c0 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +779,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +790,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3b82f6; background: #3b82f6; } - .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: #3b82f6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #1d4ed8; background: #1d4ed8; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #3b82f6; - } - .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 #bfdbfe; border-color: #3b82f6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #1d4ed8; - background: #1d4ed8; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3b82f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1d4ed8; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3b82f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #1d4ed8; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3b82f6; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #1d4ed8; + } + .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: #3b82f6; } - .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 #bfdbfe; border-color: #3b82f6; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #eff6ff; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #3b82f6; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem #bfdbfe; border-color: #3b82f6; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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: #1d4ed8; background: #eff6ff; } - .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(59, 130, 246, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1299,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 #bfdbfe; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #3b82f6; } - .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: #b7bcc5; } - .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: #2563eb; } - .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 #bfdbfe; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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: #1d4ed8; background: #eff6ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bfdbfe; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + border-color: #3b82f6; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1546,100 @@ color: #1d4ed8; background: #eff6ff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #3b82f6; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem #bfdbfe; border-color: #3b82f6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1747,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: #1d4ed8; background: #eff6ff; } - .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(59, 130, 246, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bfdbfe; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3b82f6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #bfdbfe; - border-color: #3b82f6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3b82f6; background: #3b82f6; } - .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: #3b82f6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #1d4ed8; background: #1d4ed8; - 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 #bfdbfe; + border-color: #3b82f6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #3b82f6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #1d4ed8; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #3b82f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #1d4ed8; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; @@ -1709,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #2563eb; border-color: #2563eb; 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 #bfdbfe; + border-color: #3b82f6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #1d4ed8; background: transparent; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 7a4d57fedf..1b2efb2b80 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +779,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +790,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #06b6d4; background: #06b6d4; } - .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: #06b6d4; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0e7490; background: #0e7490; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #06b6d4; - } - .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 #a5f3fc; border-color: #06b6d4; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0e7490; - background: #0e7490; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #06b6d4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e7490; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #06b6d4; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #0e7490; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #06b6d4; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e7490; + } + .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: #06b6d4; } - .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 #a5f3fc; border-color: #06b6d4; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #ecfeff; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #06b6d4; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; border-color: #06b6d4; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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: #0e7490; background: #ecfeff; } - .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(6, 182, 212, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1299,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 #a5f3fc; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #06b6d4; } - .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: #b7bcc5; } - .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: #0891b2; } - .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 #a5f3fc; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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: #0e7490; background: #ecfeff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a5f3fc; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(6, 182, 212, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + border-color: #06b6d4; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1546,100 @@ color: #0e7490; background: #ecfeff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #06b6d4; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem #a5f3fc; border-color: #06b6d4; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1747,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: #0e7490; background: #ecfeff; } - .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(6, 182, 212, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a5f3fc; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #06b6d4; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a5f3fc; - border-color: #06b6d4; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #06b6d4; background: #06b6d4; } - .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: #06b6d4; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0e7490; background: #0e7490; - 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 #a5f3fc; + border-color: #06b6d4; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #06b6d4; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #0e7490; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #06b6d4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0e7490; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; @@ -1709,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #06b6d4; border-color: #06b6d4; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #0891b2; border-color: #0891b2; 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 #a5f3fc; + border-color: #06b6d4; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #0e7490; background: transparent; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 1e4c5042ea..9282649b6e 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +779,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +790,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #10b981; background: #10b981; } - .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: #10b981; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #047857; background: #047857; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #10b981; - } - .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 #a7f3d0; border-color: #10b981; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #047857; - background: #047857; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #10b981; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #047857; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #10b981; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #047857; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #10b981; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #047857; + } + .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: #10b981; } - .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 #a7f3d0; border-color: #10b981; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #f0fdfa; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #10b981; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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: #047857; background: #f0fdfa; } - .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(16, 185, 129, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1299,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 #a7f3d0; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #10b981; } - .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: #b7bcc5; } - .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: #059669; } - .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 #a7f3d0; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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: #047857; background: #f0fdfa; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7f3d0; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(16, 185, 129, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + border-color: #10b981; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1546,100 @@ color: #047857; background: #f0fdfa; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #10b981; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem #a7f3d0; border-color: #10b981; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1747,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: #047857; background: #f0fdfa; } - .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(16, 185, 129, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7f3d0; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #10b981; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; - border-color: #10b981; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #10b981; background: #10b981; } - .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: #10b981; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #047857; background: #047857; - 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 #a7f3d0; + border-color: #10b981; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #10b981; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #047857; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #10b981; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #047857; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; @@ -1709,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #10b981; border-color: #10b981; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #059669; border-color: #059669; 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 #a7f3d0; + border-color: #10b981; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #047857; background: transparent; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 240367c5f8..f2870591cb 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +779,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +790,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #6366f1; background: #6366f1; } - .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: #6366f1; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #4338ca; background: #4338ca; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #6366f1; - } - .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 #c7d2fe; border-color: #6366f1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #4338ca; - background: #4338ca; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #6366f1; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #4338ca; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #6366f1; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #4338ca; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #6366f1; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #4338ca; + } + .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: #6366f1; } - .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 #c7d2fe; border-color: #6366f1; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #eef2ff; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #6366f1; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem #c7d2fe; border-color: #6366f1; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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: #4338ca; background: #eef2ff; } - .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(99, 102, 241, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1299,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 #c7d2fe; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #6366f1; } - .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: #b7bcc5; } - .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: #4f46e5; } - .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 #c7d2fe; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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: #4338ca; background: #eef2ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7d2fe; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(99, 102, 241, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + border-color: #6366f1; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1546,100 @@ color: #4338ca; background: #eef2ff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #6366f1; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem #c7d2fe; border-color: #6366f1; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1747,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: #4338ca; background: #eef2ff; } - .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(99, 102, 241, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7d2fe; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #6366f1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #c7d2fe; - border-color: #6366f1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #6366f1; background: #6366f1; } - .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: #6366f1; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #4338ca; background: #4338ca; - 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 #c7d2fe; + border-color: #6366f1; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #6366f1; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #4338ca; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #6366f1; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #4338ca; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; @@ -1709,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #6366f1; border-color: #6366f1; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #4f46e5; border-color: #4f46e5; 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 #c7d2fe; + border-color: #6366f1; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #4338ca; background: transparent; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 2e10e67cab..8f49a0ac0a 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +779,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +790,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ec4899; background: #ec4899; } - .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: #ec4899; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #be185d; background: #be185d; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ec4899; - } - .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 #fbcfe8; border-color: #ec4899; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #be185d; - background: #be185d; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ec4899; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #be185d; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ec4899; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #be185d; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ec4899; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #be185d; + } + .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: #ec4899; } - .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 #fbcfe8; border-color: #ec4899; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #fdf2f8; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ec4899; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; border-color: #ec4899; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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: #be185d; background: #fdf2f8; } - .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(236, 72, 153, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1299,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 #fbcfe8; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ec4899; } - .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: #b7bcc5; } - .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: #db2777; } - .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 #fbcfe8; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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: #be185d; background: #fdf2f8; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fbcfe8; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(236, 72, 153, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + border-color: #ec4899; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1546,100 @@ color: #be185d; background: #fdf2f8; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ec4899; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem #fbcfe8; border-color: #ec4899; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1747,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: #be185d; background: #fdf2f8; } - .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(236, 72, 153, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #fbcfe8; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ec4899; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #fbcfe8; - border-color: #ec4899; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ec4899; background: #ec4899; } - .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: #ec4899; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #be185d; background: #be185d; - 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 #fbcfe8; + border-color: #ec4899; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ec4899; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #be185d; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ec4899; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #be185d; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; @@ -1709,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ec4899; border-color: #ec4899; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #db2777; border-color: #db2777; 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 #fbcfe8; + border-color: #ec4899; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #be185d; background: transparent; diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index 0a04caedf6..4358cad38d 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -432,6 +432,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + border-color: #8b5cf6; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -640,7 +646,8 @@ box-shadow: 0 0 0 0.2rem #ddd6fe; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1477,9 +1484,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #6d28d9; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1492,7 +1516,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; @@ -2882,10 +2906,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e5e7eb; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f9fafb; color: #374151; diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 3beaa3cad4..f9074bab75 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -738,10 +738,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +779,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +790,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #14b8a6; background: #14b8a6; } - .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: #14b8a6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0f766e; background: #0f766e; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #14b8a6; - } - .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 #99f6e4; border-color: #14b8a6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0f766e; - background: #0f766e; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #14b8a6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0f766e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #14b8a6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #0f766e; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #14b8a6; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0f766e; + } + .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: #14b8a6; } - .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 #99f6e4; border-color: #14b8a6; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #0f766e; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +975,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #14b8a6; @@ -865,6 +1069,18 @@ box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1091,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1133,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1145,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: #0f766e; background: #0f766e; } - .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(20, 184, 166, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1179,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1245,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1299,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 #99f6e4; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #14b8a6; } - .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: #b7bcc5; } - .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: #0d9488; } - .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 #99f6e4; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1165,11 +1410,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1463,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1473,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: #0f766e; background: #0f766e; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99f6e4; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1495,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + border-color: #14b8a6; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1546,100 @@ color: #0f766e; background: #0f766e; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #14b8a6; @@ -1268,8 +1650,14 @@ box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1683,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1705,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1712,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1747,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: #0f766e; background: #0f766e; } - .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(20, 184, 166, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99f6e4; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1779,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1803,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1855,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #14b8a6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #99f6e4; - border-color: #14b8a6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,36 +1863,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #14b8a6; background: #14b8a6; } - .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: #14b8a6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0f766e; background: #0f766e; - 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 #99f6e4; + border-color: #14b8a6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #14b8a6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #0f766e; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #14b8a6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0f766e; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1499,7 +1942,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -1709,44 +2152,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 #d1d5db; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - color: #4b5563; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #14b8a6; border-color: #14b8a6; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #0d9488; border-color: #0d9488; 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 #99f6e4; + border-color: #14b8a6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -2196,6 +2673,54 @@ border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #0f766e; background: transparent; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index c048948bcf..01ddf4e0a1 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -722,8 +722,56 @@ background-color: #4b4b4b; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; width: 20px; height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,67 +792,143 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffe082; background: #ffe082; } - .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: #ffe082; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ffca28; background: #ffca28; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffe082; - } - .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.1rem white; border-color: #ffe082; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffca28; - background: #ffca28; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffe082; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffca28; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ffe082; } - .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: #4b4b4b; } - .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: #ffca28; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffe082; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffca28; + } + .p-chips { + display: inline-flex; + } + .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: #ffe082; } - .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.1rem white; border-color: #ffe082; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #ffe082; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .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: #191919; border: 1px solid #4b4b4b; 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: #ffe082; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #ffe082; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .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.429rem; } @@ -861,7 +1077,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .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; } @@ -903,13 +1119,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -922,14 +1131,28 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #ffe082; } - .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(255, 224, 130, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .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.857rem; @@ -942,18 +1165,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1038,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ffe082; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #ffd54f; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #323232; color: #dedede; border: 1px solid #4b4b4b; 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.429rem 0.857rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #ffe082; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1205,10 +1481,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 224, 130, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #ffe082; + } .p-listbox.p-invalid { border-color: #e57373; } @@ -1239,11 +1532,100 @@ color: #212529; background: #ffe082; } + .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: #191919; border: 1px solid #4b4b4b; 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: #ffe082; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #ffe082; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1313,9 +1691,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.429rem; } @@ -1323,7 +1698,11 @@ right: 0.429rem; color: #888888; } + .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(136, 136, 136, 0.5333333333); @@ -1354,19 +1733,23 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #ffe082; } - .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(255, 224, 130, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1427,15 +1841,7 @@ color: #dedede; 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: #ffe082; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #ffe082; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffe082; background: #ffe082; } - .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: #ffe082; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ffca28; background: #ffca28; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #ffe082; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffe082; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #ffca28; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ffe082; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffca28; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ffe082; border-color: #ffe082; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #ffd54f; border-color: #ffd54f; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #ffe082; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 5d61c08e9f..62ac651699 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -722,8 +722,56 @@ background-color: #4b4b4b; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; width: 20px; height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,67 +792,143 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81d4fa; background: #81d4fa; } - .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: #81d4fa; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #29b6f6; background: #29b6f6; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81d4fa; - } - .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.1rem white; border-color: #81d4fa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #29b6f6; - background: #29b6f6; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81d4fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #29b6f6; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #81d4fa; } - .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: #4b4b4b; } - .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: #29b6f6; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81d4fa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #29b6f6; + } + .p-chips { + display: inline-flex; + } + .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: #81d4fa; } - .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.1rem white; border-color: #81d4fa; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #81d4fa; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .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: #191919; border: 1px solid #4b4b4b; 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: #81d4fa; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #81d4fa; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .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.429rem; } @@ -861,7 +1077,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .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; } @@ -903,13 +1119,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -922,14 +1131,28 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #81d4fa; } - .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(129, 212, 250, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .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.857rem; @@ -942,18 +1165,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1038,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #81d4fa; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #4fc3f7; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #323232; color: #dedede; border: 1px solid #4b4b4b; 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.429rem 0.857rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #81d4fa; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1205,10 +1481,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 212, 250, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81d4fa; + } .p-listbox.p-invalid { border-color: #e57373; } @@ -1239,11 +1532,100 @@ color: #212529; background: #81d4fa; } + .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: #191919; border: 1px solid #4b4b4b; 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: #81d4fa; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #81d4fa; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1313,9 +1691,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.429rem; } @@ -1323,7 +1698,11 @@ right: 0.429rem; color: #888888; } + .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(136, 136, 136, 0.5333333333); @@ -1354,19 +1733,23 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #81d4fa; } - .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(129, 212, 250, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1427,15 +1841,7 @@ color: #dedede; 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: #81d4fa; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #81d4fa; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81d4fa; background: #81d4fa; } - .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: #81d4fa; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #29b6f6; background: #29b6f6; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81d4fa; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #81d4fa; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #29b6f6; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #81d4fa; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #29b6f6; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #81d4fa; border-color: #81d4fa; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #4fc3f7; border-color: #4fc3f7; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #81d4fa; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 88917dedf8..c0533f7d1d 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -722,8 +722,56 @@ background-color: #4b4b4b; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; width: 20px; height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,67 +792,143 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #c5e1a5; background: #c5e1a5; } - .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: #c5e1a5; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9ccc65; background: #9ccc65; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #c5e1a5; - } - .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.1rem white; border-color: #c5e1a5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9ccc65; - background: #9ccc65; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #c5e1a5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9ccc65; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #c5e1a5; } - .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: #4b4b4b; } - .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: #9ccc65; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #c5e1a5; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9ccc65; + } + .p-chips { + display: inline-flex; + } + .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: #c5e1a5; } - .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.1rem white; border-color: #c5e1a5; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #c5e1a5; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .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: #191919; border: 1px solid #4b4b4b; 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: #c5e1a5; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #c5e1a5; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .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.429rem; } @@ -861,7 +1077,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .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; } @@ -903,13 +1119,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -922,14 +1131,28 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #c5e1a5; } - .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(197, 225, 165, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .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.857rem; @@ -942,18 +1165,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1038,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #c5e1a5; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #aed581; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #323232; color: #dedede; border: 1px solid #4b4b4b; 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.429rem 0.857rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #c5e1a5; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1205,10 +1481,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(197, 225, 165, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #c5e1a5; + } .p-listbox.p-invalid { border-color: #e57373; } @@ -1239,11 +1532,100 @@ color: #212529; background: #c5e1a5; } + .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: #191919; border: 1px solid #4b4b4b; 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: #c5e1a5; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #c5e1a5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1313,9 +1691,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.429rem; } @@ -1323,7 +1698,11 @@ right: 0.429rem; color: #888888; } + .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(136, 136, 136, 0.5333333333); @@ -1354,19 +1733,23 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #c5e1a5; } - .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(197, 225, 165, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1427,15 +1841,7 @@ color: #dedede; 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: #c5e1a5; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #c5e1a5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #c5e1a5; background: #c5e1a5; } - .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: #c5e1a5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9ccc65; background: #9ccc65; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #c5e1a5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #c5e1a5; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #9ccc65; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #c5e1a5; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #9ccc65; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #c5e1a5; border-color: #c5e1a5; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #aed581; border-color: #aed581; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #c5e1a5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 38b697aafb..bcb6374466 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -722,8 +722,56 @@ background-color: #4b4b4b; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #4b4b4b; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; width: 20px; height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #4b4b4b; @@ -733,6 +781,7 @@ color: #dedede; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,67 +792,143 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #f48fb1; background: #f48fb1; } - .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: #f48fb1; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ec407a; background: #ec407a; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #f48fb1; - } - .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.1rem white; border-color: #f48fb1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ec407a; - background: #ec407a; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e57373; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f48fb1; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ec407a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #f48fb1; } - .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: #4b4b4b; } - .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: #ec407a; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #f48fb1; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ec407a; + } + .p-chips { + display: inline-flex; + } + .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: #f48fb1; } - .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.1rem white; border-color: #f48fb1; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #f48fb1; + background: #4b4b4b; color: #dedede; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: #dedede; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .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: #191919; border: 1px solid #4b4b4b; 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: #f48fb1; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 0.1rem white; border-color: #f48fb1; } + .p-dropdown.p-variant-filled { + background: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } + .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.429rem; } @@ -861,7 +1077,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #9b9b9b; } - .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; } @@ -903,13 +1119,6 @@ right: 0.429rem; color: #888888; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -922,14 +1131,28 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #f48fb1; } - .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(244, 143, 177, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } + .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.857rem; @@ -942,18 +1165,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-dropdown { - background: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #252525; color: #888888; @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .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: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1038,27 +1285,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.1rem white; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #4b4b4b; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #f48fb1; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #323232; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #4b4b4b; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #f06292; } - .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.1rem white; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e57373; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #323232; color: #dedede; border: 1px solid #4b4b4b; 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.429rem 0.857rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #f48fb1; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1205,10 +1481,27 @@ color: #dedede; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(244, 143, 177, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #dedede; + background: #4c4c4c; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #dedede; background: #4c4c4c; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #dedede; + background: #4c4c4c; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #f48fb1; + } .p-listbox.p-invalid { border-color: #e57373; } @@ -1239,11 +1532,100 @@ color: #212529; background: #f48fb1; } + .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: #191919; border: 1px solid #4b4b4b; 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: #f48fb1; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 0.1rem white; border-color: #f48fb1; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #888888; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e57373; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #323232; color: #dedede; @@ -1313,9 +1691,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.429rem; } @@ -1323,7 +1698,11 @@ right: 0.429rem; color: #888888; } + .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(136, 136, 136, 0.5333333333); @@ -1354,19 +1733,23 @@ transition: background-color 0.2s, border-color 0.2s, 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: #212529; background: #f48fb1; } - .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(244, 143, 177, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #dedede; background: #4c4c4c; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: #dedede; background: transparent; } - .p-input-filled .p-multiselect { - background: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #4b4b4b; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #4b4b4b; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e57373; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + .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: 1px solid #4b4b4b; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #4b4b4b; background: #191919; @@ -1427,15 +1841,7 @@ color: #dedede; 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: #f48fb1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem white; - border-color: #f48fb1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #f48fb1; background: #f48fb1; } - .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: #f48fb1; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ec407a; background: #ec407a; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #f48fb1; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e57373; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #f48fb1; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #4b4b4b; } - .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: #ec407a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #f48fb1; } - .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: #4b4b4b; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ec407a; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } - .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 #252525; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #252525; border: 1px solid #252525; color: #dedede; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #888888; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #4c4c4c; - border-color: #4c4c4c; - color: #dedede; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #dedede; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #f48fb1; border-color: #f48fb1; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #4c4c4c; + border-color: #4c4c4c; + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #dedede; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #f06292; border-color: #f06292; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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.1rem white; + border-color: #f48fb1; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e57373; } .p-button { diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index cb8b34190f..1277e7ab4a 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -735,8 +742,56 @@ background-color: hsla(0, 0%, 100%, 0.1); } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; width: 18px; height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid hsla(0, 0%, 100%, 0.7); @@ -746,6 +801,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -756,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #CE93D8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #CE93D8; - background: #CE93D8; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #CE93D8; } - .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: hsla(0, 0%, 100%, 0.08); } - .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: #CE93D8; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - 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: hsla(0, 0%, 100%, 0.06); } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } - .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: none; border-color: #CE93D8; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(206, 147, 216, 0.16); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: hsla(0, 0%, 100%, 0.24); + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -846,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -861,6 +1072,18 @@ box-shadow: none; border-color: #CE93D8; } + .p-dropdown.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -871,7 +1094,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; } @@ -913,13 +1136,6 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -932,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0, 0%, 100%, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 1rem; @@ -952,18 +1182,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1030,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1048,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #CE93D8; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #CE93D8; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1161,11 +1413,40 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; @@ -1185,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1194,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1215,45 +1498,151 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { - color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-listbox.p-invalid { + border-color: #f44435; + } + .p-mention-panel { + background: #2b2b2b; + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + } + .p-mention-panel .p-mention-items { + padding: 0; + } + .p-mention-panel .p-mention-items .p-mention-item { + margin: 0; + padding: 1rem 1rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: none; + border-radius: 0; + } + .p-mention-panel .p-mention-items .p-mention-item:hover { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #CE93D8; + background: rgba(206, 147, 216, 0.16); + } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; } - .p-listbox.p-invalid { - border-color: #f44435; + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; } - .p-mention-panel { - background: #2b2b2b; - color: rgba(255, 255, 255, 0.87); - border: 0 none; - border-radius: 4px; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; } - .p-mention-panel .p-mention-items { - padding: 0; + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; } - .p-mention-panel .p-mention-items .p-mention-item { - margin: 0; - padding: 1rem 1rem; - border: 0 none; - color: rgba(255, 255, 255, 0.87); - background: transparent; - transition: none; - border-radius: 0; + .p-multiselect-filter-container .p-inputtext { + width: 100%; } - .p-mention-panel .p-mention-items .p-mention-item:hover { - color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; } - .p-mention-panel .p-mention-items .p-mention-item.p-highlight { - color: #CE93D8; - background: rgba(206, 147, 216, 0.16); + .p-fluid .p-multiselect { + display: flex; } .p-multiselect { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1264,8 +1653,14 @@ box-shadow: none; border-color: #CE93D8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1291,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1323,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1333,7 +1715,11 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -1364,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0, 0%, 100%, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1392,15 +1782,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1425,10 +1806,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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; @@ -1437,15 +1858,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1453,36 +1866,73 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; - color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #121212; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #CE93D8; 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); @@ -1495,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1705,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: hsla(0, 0%, 100%, 0.1); } - .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 rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #CE93D8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2192,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -2885,10 +3417,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5973,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(206, 147, 216, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #CE93D8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #CE93D8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6325,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; @@ -6905,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index f3b61b51d3..d59fcea4f8 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -741,10 +741,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: hsla(0, 0%, 100%, 0.1); } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; @@ -753,6 +782,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +793,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; + width: 18px; + height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #9FA8DA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9FA8DA; - background: #9FA8DA; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } - .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: hsla(0, 0%, 100%, 0.08); } - .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: #9FA8DA; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - 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: hsla(0, 0%, 100%, 0.06); + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .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: rgba(255, 255, 255, 0.6); } - .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: none; border-color: #9FA8DA; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(159, 168, 218, 0.16); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: hsla(0, 0%, 100%, 0.24); + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #9FA8DA; } + .p-dropdown.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -878,7 +1094,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; } @@ -920,13 +1136,6 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 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(159, 168, 218, 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: hsla(0, 0%, 100%, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 1rem; @@ -959,18 +1182,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(159, 168, 218, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #9FA8DA; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #9FA8DA; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1168,11 +1413,40 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1222,10 +1498,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: hsla(0, 0%, 100%, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-listbox.p-invalid { border-color: #f44435; } @@ -1256,11 +1549,100 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #9FA8DA; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1330,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1340,7 +1715,11 @@ right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -1371,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 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(159, 168, 218, 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: hsla(0, 0%, 100%, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1399,15 +1782,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1432,10 +1806,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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; @@ -1444,15 +1858,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,36 +1866,73 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; - color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #121212; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1502,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1712,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: hsla(0, 0%, 100%, 0.1); } - .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 rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #9FA8DA; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2199,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -6386,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index d129df560f..45e572ac79 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -735,8 +742,56 @@ background-color: #dcdcdc; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; width: 18px; height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #757575; @@ -746,6 +801,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -756,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; } - .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: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #673AB7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #673AB7; - background: #673AB7; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + 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: #673AB7; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #673AB7; } - .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: #ececec; } - .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: #673AB7; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - 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: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } - .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: none; border-color: #673AB7; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(103, 58, 183, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -846,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -861,6 +1072,18 @@ box-shadow: none; border-color: #673AB7; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -871,7 +1094,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 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; } @@ -913,13 +1136,6 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -932,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 1rem; @@ -952,18 +1182,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1030,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1048,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #673AB7; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #673AB7; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1161,11 +1413,40 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; @@ -1185,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1194,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1215,10 +1498,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-listbox.p-invalid { border-color: #b00020; } @@ -1249,11 +1549,100 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1264,8 +1653,14 @@ box-shadow: none; border-color: #673AB7; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1291,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1323,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1333,7 +1715,11 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -1364,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1392,15 +1782,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1425,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1437,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1453,36 +1866,73 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; - color: #673AB7; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #673AB7; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #ffffff; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { 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); @@ -1495,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1705,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #673AB7; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2192,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #673AB7; background: transparent; @@ -2885,10 +3417,6 @@ border: 0 none; padding: 1rem 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5973,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(103, 58, 183, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #673AB7; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #673AB7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6325,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6905,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index fbd527fb41..f2fac2e36e 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -742,8 +742,56 @@ background-color: #dcdcdc; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; width: 18px; height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #757575; @@ -753,6 +801,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3F51B5; background: #3F51B5; } - .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: 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; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3F51B5; - background: #3F51B5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3F51B5; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3F51B5; } - .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: #ececec; } - .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: #3F51B5; } - .p-chips .p-chips-multiple-container { - padding: 0.5rem 1rem; - 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: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .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; + } + .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 .p-chips-multiple-container:not(.p-disabled):hover { + .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: rgba(0, 0, 0, 0.87); } - .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: none; border-color: #3F51B5; } + .p-chips .p-chips-multiple-container { + padding: 0.5rem 1rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #3F51B5; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 2rem; } @@ -878,7 +1094,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 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; } @@ -920,13 +1136,6 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 4rem; - margin-right: -4rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 3rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .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(63, 81, 181, 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); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 1rem; @@ -959,18 +1182,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #3F51B5; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #3F51B5; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1168,11 +1413,40 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 1rem; @@ -1222,10 +1498,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-listbox.p-invalid { border-color: #b00020; } @@ -1256,11 +1549,100 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #3F51B5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 1rem 1rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 2rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1330,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 2rem; } @@ -1340,7 +1715,11 @@ right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -1371,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .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(63, 81, 181, 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); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1399,15 +1782,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1432,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1444,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,36 +1866,73 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; - color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #ffffff; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1502,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1712,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #3F51B5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2199,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -6386,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 37b91b8238..d510f3659a 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -735,8 +742,56 @@ background-color: hsla(0, 0%, 100%, 0.1); } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; width: 18px; height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid hsla(0, 0%, 100%, 0.7); @@ -746,6 +801,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -756,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #CE93D8; background: #CE93D8; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #CE93D8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #CE93D8; - background: #CE93D8; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #CE93D8; } - .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: hsla(0, 0%, 100%, 0.08); } - .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: #CE93D8; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } - .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: none; border-color: #CE93D8; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(206, 147, 216, 0.16); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: hsla(0, 0%, 100%, 0.24); + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -846,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -861,6 +1072,18 @@ box-shadow: none; border-color: #CE93D8; } + .p-dropdown.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -871,7 +1094,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; } @@ -913,13 +1136,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -932,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0, 0%, 100%, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem; @@ -952,18 +1182,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1030,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1048,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #CE93D8; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #CE93D8; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(206, 147, 216, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1161,11 +1413,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; @@ -1185,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1194,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1215,45 +1498,151 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { - color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-listbox.p-invalid { + border-color: #f44435; + } + .p-mention-panel { + background: #2b2b2b; + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + } + .p-mention-panel .p-mention-items { + padding: 0; + } + .p-mention-panel .p-mention-items .p-mention-item { + margin: 0; + padding: 0.75rem 0.75rem; + border: 0 none; + color: rgba(255, 255, 255, 0.87); + background: transparent; + transition: none; + border-radius: 0; + } + .p-mention-panel .p-mention-items .p-mention-item:hover { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-mention-panel .p-mention-items .p-mention-item.p-highlight { + color: #CE93D8; + background: rgba(206, 147, 216, 0.16); + } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; } - .p-listbox.p-invalid { - border-color: #f44435; + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; } - .p-mention-panel { - background: #2b2b2b; - color: rgba(255, 255, 255, 0.87); - border: 0 none; - border-radius: 4px; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; } - .p-mention-panel .p-mention-items { - padding: 0; + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; } - .p-mention-panel .p-mention-items .p-mention-item { - margin: 0; - padding: 0.75rem 0.75rem; - border: 0 none; - color: rgba(255, 255, 255, 0.87); - background: transparent; - transition: none; - border-radius: 0; + .p-multiselect-filter-container .p-inputtext { + width: 100%; } - .p-mention-panel .p-mention-items .p-mention-item:hover { - color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; } - .p-mention-panel .p-mention-items .p-mention-item.p-highlight { - color: #CE93D8; - background: rgba(206, 147, 216, 0.16); + .p-fluid .p-multiselect { + display: flex; } .p-multiselect { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1264,8 +1653,14 @@ box-shadow: none; border-color: #CE93D8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1291,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1323,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1333,7 +1715,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1364,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: hsla(0, 0%, 100%, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1392,15 +1782,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1425,10 +1806,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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; @@ -1437,15 +1858,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #CE93D8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1453,36 +1866,73 @@ transition-duration: 0.2s; background-color: #CE93D8; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #CE93D8; background: #121212; - color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #121212; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #CE93D8; 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); @@ -1495,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1705,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: hsla(0, 0%, 100%, 0.1); } - .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 rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #CE93D8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2192,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -2885,10 +3417,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(255, 255, 255, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -5973,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(206, 147, 216, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #CE93D8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #CE93D8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6325,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; @@ -6905,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 00d9a735cd..ad3f9dd87b 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -741,10 +741,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: hsla(0, 0%, 100%, 0.1); } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 18px; height: 18px; } + .p-checkbox .p-checkbox-input { + border: 2px solid hsla(0, 0%, 100%, 0.7); + border-radius: 4px; + } .p-checkbox .p-checkbox-box { border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; @@ -753,6 +782,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +793,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); + background: #1e1e1e; + width: 18px; + height: 18px; + color: rgba(255, 255, 255, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; } - .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: rgba(255, 255, 255, 0.6); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9FA8DA; background: #9FA8DA; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #9FA8DA; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9FA8DA; - background: #9FA8DA; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44435; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } - .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: hsla(0, 0%, 100%, 0.08); } - .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: #9FA8DA; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .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: rgba(255, 255, 255, 0.6); } - .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: none; border-color: #9FA8DA; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(159, 168, 218, 0.16); + background: hsla(0, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: hsla(0, 0%, 100%, 0.24); + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #9FA8DA; } + .p-dropdown.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -878,7 +1094,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; } @@ -920,13 +1136,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 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(159, 168, 218, 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: hsla(0, 0%, 100%, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem; @@ -959,18 +1182,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(159, 168, 218, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #9FA8DA; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: hsla(0, 0%, 100%, 0.3); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #9FA8DA; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(159, 168, 218, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44435; } .p-inputtext { @@ -1168,11 +1413,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid hsla(0, 0%, 100%, 0.3); border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1222,10 +1498,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: hsla(0, 0%, 100%, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: hsla(0, 0%, 100%, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } .p-listbox.p-invalid { border-color: #f44435; } @@ -1256,11 +1549,100 @@ color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #1e1e1e; border: 1px solid hsla(0, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(255, 255, 255, 0.6); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #9FA8DA; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: hsla(0, 0%, 100%, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: hsla(0, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44435; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1330,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1340,7 +1715,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1371,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 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(159, 168, 218, 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: hsla(0, 0%, 100%, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1399,15 +1782,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44435; } @@ -1432,10 +1806,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 hsla(0, 0%, 100%, 0.7); + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); background: #1e1e1e; @@ -1444,15 +1858,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(255, 255, 255, 0.6); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #9FA8DA; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,36 +1866,73 @@ transition-duration: 0.2s; background-color: #9FA8DA; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; } - .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: rgba(255, 255, 255, 0.6); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9FA8DA; background: #121212; - color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44435; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.06); + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.06); } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #121212; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: hsla(0, 0%, 100%, 0.08); } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #121212; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #9FA8DA; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1502,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f44435; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1712,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: hsla(0, 0%, 100%, 0.1); } - .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 rgba(255, 255, 255, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #373737; + .p-togglebutton.p-highlight .p-button { + background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #1c1c1c; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #373737; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(255, 255, 255, 0.6); } - .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: none; + border-color: #9FA8DA; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44435; } .p-button { @@ -2199,6 +2676,54 @@ border-color: transparent; color: #ef9a9a; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #121212; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d0d0d0; + color: #121212; + border-color: #d0d0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b8b8b8; + color: #121212; + border-color: #b8b8b8; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -6386,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(255, 255, 255, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(255, 255, 255, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(255, 255, 255, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(255, 255, 255, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(255, 255, 255, 0.16); + } .p-calendar-w-btn { border: 1px solid hsla(0, 0%, 100%, 0.3); background: #1e1e1e; diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 63c273fbd2..7cf48a7d64 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -435,6 +435,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -643,7 +649,8 @@ box-shadow: none; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -735,8 +742,56 @@ background-color: #dcdcdc; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; width: 18px; height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #757575; @@ -746,6 +801,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -756,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; } - .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: rgba(0, 0, 0, 0.87); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #673AB7; background: #673AB7; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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: #673AB7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #673AB7; - background: #673AB7; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + 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: #673AB7; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #673AB7; } - .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: #ececec; } - .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: #673AB7; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #673AB7; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } - .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: none; border-color: #673AB7; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(103, 58, 183, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -846,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -861,6 +1072,18 @@ box-shadow: none; border-color: #673AB7; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -871,7 +1094,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 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; } @@ -913,13 +1136,6 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -932,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem; @@ -952,18 +1182,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1030,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1048,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #673AB7; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #673AB7; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(103, 58, 183, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1161,11 +1413,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; @@ -1185,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1194,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1215,10 +1498,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } .p-listbox.p-invalid { border-color: #b00020; } @@ -1249,11 +1549,100 @@ color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1264,8 +1653,14 @@ box-shadow: none; border-color: #673AB7; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1291,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1323,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1333,7 +1715,11 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -1364,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1392,15 +1782,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1425,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1437,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1453,36 +1866,73 @@ transition-duration: 0.2s; background-color: #673AB7; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #673AB7; background: #ffffff; - color: #673AB7; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #673AB7; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #ffffff; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { 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); @@ -1495,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1705,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #673AB7; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2192,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #673AB7; background: transparent; @@ -2885,10 +3417,6 @@ border: 0 none; padding: 0.75rem; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid rgba(0, 0, 0, 0.12); - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -5973,6 +6501,64 @@ outline-offset: 0; box-shadow: none; } + .p-metergroup .p-metergroup-meter-container { + background: rgba(103, 58, 183, 0.32); + border-radius: 4px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #673AB7; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 4px; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #673AB7; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 4px; @@ -6325,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6905,6 +7522,9 @@ .p-menubar .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1rem; + } .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index f1a92ef63a..f6bced63db 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -742,8 +742,56 @@ background-color: #dcdcdc; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 18px; + height: 18px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #757575; + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #757575; + background: #ffffff; width: 18px; height: 18px; + color: rgba(0, 0, 0, 0.87); + border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #757575; @@ -753,6 +801,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -763,64 +812,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #3F51B5; background: #3F51B5; } - .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: 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; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .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; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3F51B5; - background: #3F51B5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3F51B5; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #3F51B5; } - .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: #ececec; } - .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: #3F51B5; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #3F51B5; + } + .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; + } + .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 .p-chips-multiple-container:not(.p-disabled):hover { + .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: rgba(0, 0, 0, 0.87); } - .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: none; border-color: #3F51B5; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); + background: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: rgba(0, 0, 0, 0.24); + color: rgba(0, 0, 0, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -853,11 +978,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -868,6 +1072,18 @@ box-shadow: none; border-color: #3F51B5; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -878,7 +1094,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(0, 0, 0, 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; } @@ -920,13 +1136,6 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -939,14 +1148,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .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(63, 81, 181, 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); background: rgba(0, 0, 0, 0.04); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem; @@ -959,18 +1182,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #f5f5f5; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1037,14 +1248,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .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: 2.75rem; height: 1rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 0.5rem; + } .p-inputswitch .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1055,27 +1302,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.5rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #3F51B5; + transform: translateX(1.5rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #3F51B5; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #b00020; } .p-inputtext { @@ -1168,11 +1413,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); border: 1px solid #e5e5e5; border-radius: 4px; + transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; @@ -1192,6 +1466,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1201,15 +1476,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem; @@ -1222,10 +1498,27 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); background: rgba(0, 0, 0, 0.04); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.04); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } .p-listbox.p-invalid { border-color: #b00020; } @@ -1256,11 +1549,100 @@ color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: rgba(0, 0, 0, 0.87); @@ -1271,8 +1653,14 @@ box-shadow: none; border-color: #3F51B5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1298,22 +1686,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(0, 0, 0, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #b00020; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1330,9 +1708,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1340,7 +1715,11 @@ right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -1371,19 +1750,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } - .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(63, 81, 181, 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); background: rgba(0, 0, 0, 0.04); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1399,15 +1782,6 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #f5f5f5; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #ececec; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #dcdcdc; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #b00020; } @@ -1432,10 +1806,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 #757575; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #757575; background: #ffffff; @@ -1444,15 +1858,7 @@ color: rgba(0, 0, 0, 0.87); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: rgba(0, 0, 0, 0.87); - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - border-color: #3F51B5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1460,36 +1866,73 @@ transition-duration: 0.2s; background-color: #3F51B5; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; } - .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: rgba(0, 0, 0, 0.87); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3F51B5; background: #ffffff; - color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { + background: #ffffff; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #ececec; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #ffffff; + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3F51B5; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -1502,7 +1945,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #b00020; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -1712,44 +2155,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } - .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 rgba(0, 0, 0, 0.12); + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f6f6; - border-color: rgba(0, 0, 0, 0.12); + .p-togglebutton.p-highlight .p-button { + background: #e0e0e1; + border-color: #e0e0e1; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight { - background: #e0e0e1; - border-color: #e0e0e1; + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f6f6f6; + border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton: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(0, 0, 0, 0.6); } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; color: rgba(0, 0, 0, 0.87); } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: rgba(0, 0, 0, 0.6); } - .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: none; + border-color: #3F51B5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { @@ -2199,6 +2676,54 @@ border-color: transparent; color: #d32f2f; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212121; + border: 1px solid #212121; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #424242; + color: #ffffff; + border-color: #424242; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #616161; + color: #ffffff; + border-color: #616161; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + color: #212121; + border: 0 none; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212121; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 33, 33, 0.04); + border-color: transparent; + color: #212121; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 33, 33, 0.16); + border-color: transparent; + color: #212121; + } .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -6386,6 +6911,37 @@ .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-button.p-button-contrast:enabled:focus, + .p-buttonset.p-button-contrast > .p-button:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button:enabled:focus { + background: rgba(33, 33, 33, 0.76); + } + .p-button.p-button-contrast:enabled:active, + .p-buttonset.p-button-contrast > .p-button:enabled:active, + .p-splitbutton.p-button-contrast > .p-button:enabled:active { + background: rgba(33, 33, 33, 0.68); + } + .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus { + background: rgba(33, 33, 33, 0.12); + } + .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active { + background: rgba(33, 33, 33, 0.16); + } + .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-text .p-ink, + .p-buttonset.p-button-contrast > .p-button.p-button-outlined .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink, + .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink { + background-color: rgba(33, 33, 33, 0.16); + } .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index edd7eb29c1..172c2b13d3 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -744,8 +744,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d8dee9; + border-radius: 4px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d8dee9; + background: #ffffff; width: 20px; height: 20px; + color: #4c566a; + border-radius: 4px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #d8dee9; @@ -755,6 +803,7 @@ color: #4c566a; border-radius: 4px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -765,64 +814,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #5e81ac; background: #5e81ac; } - .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: #81a1c1; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #48678c; background: #81a1c1; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81a1c1; - } - .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 #c0d0e0; border-color: #81a1c1; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #48678c; - background: #81a1c1; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #bf616a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #eceff4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #5e81ac; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #eceff4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #81a1c1; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #eceff4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #5e81ac; } - .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: #eceff4; } - .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: #81a1c1; } - .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: #eceff4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #5e81ac; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #eceff4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #81a1c1; + } + .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: #81a1c1; } - .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 #c0d0e0; border-color: #81a1c1; } + .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: #d8dee9; + background: #e5e9f0; color: #4c566a; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #d8dee9; + color: #4c566a; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -855,11 +980,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 #d8dee9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 4px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #81a1c1; @@ -870,6 +1074,18 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + .p-dropdown.p-variant-filled { + background: #eceff4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #eceff4; + } + .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; } @@ -880,7 +1096,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #4c566a; } - .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; } @@ -922,13 +1138,6 @@ right: 0.5rem; color: #81a1c1; } - .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; } @@ -941,14 +1150,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #2e3440; background: #d8dee9; } - .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: #bec8da; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4c566a; background: transparent; } + .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; @@ -961,18 +1184,6 @@ color: #4c566a; background: transparent; } - .p-input-filled .p-dropdown { - background: #eceff4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #eceff4; - } - .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: #ffffff; color: #81a1c1; @@ -1039,14 +1250,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } + .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: #d8dee9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #5e81ac; @@ -1057,27 +1304,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 #c0d0e0; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #eceff4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #5e81ac; } - .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: #eceff4; } - .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: #81a1c1; } - .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 #c0d0e0; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #bf616a; } .p-inputtext { @@ -1170,11 +1415,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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: #4c566a; border: 1px solid #d8dee9; border-radius: 4px; + 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; @@ -1194,6 +1468,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1203,15 +1478,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #2e3440; background: #d8dee9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c0d0e0; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1224,10 +1500,27 @@ color: #4c566a; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #bec8da; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4c566a; + background: transparent; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4c566a; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4c566a; + background: transparent; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + border-color: #81a1c1; + } .p-listbox.p-invalid { border-color: #bf616a; } @@ -1258,11 +1551,100 @@ color: #2e3440; background: #d8dee9; } + .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 #d8dee9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 4px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #81a1c1; @@ -1273,8 +1655,14 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #eceff4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #eceff4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1300,22 +1688,12 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } - .p-multiselect .p-multiselect-clear-icon { - color: #81a1c1; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #bf616a; } .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: #4c566a; @@ -1332,9 +1710,6 @@ border-top-right-radius: 4px; border-top-left-radius: 4px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1342,7 +1717,11 @@ right: 0.5rem; color: #81a1c1; } + .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: #81a1c1; @@ -1373,19 +1752,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #2e3440; background: #d8dee9; } - .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: #bec8da; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4c566a; background: transparent; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c0d0e0; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1401,15 +1784,6 @@ color: #4c566a; background: transparent; } - .p-input-filled .p-multiselect { - background: #eceff4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #eceff4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } @@ -1434,10 +1808,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #7fa366; } + .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 #d8dee9; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d8dee9; background: #ffffff; @@ -1446,15 +1860,7 @@ color: #4c566a; 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: #81a1c1; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #c0d0e0; - border-color: #81a1c1; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1462,36 +1868,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #5e81ac; background: #5e81ac; } - .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: #81a1c1; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #5e81ac; background: #81a1c1; - 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 #c0d0e0; + border-color: #81a1c1; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #bf616a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #eceff4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #5e81ac; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #eceff4; } - .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: #81a1c1; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #eceff4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #5e81ac; } - .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: #eceff4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #81a1c1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #4c566a; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1504,7 +1947,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #bf616a; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -1714,44 +2157,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: 2px solid #d8dee9; + border-radius: 4px; + } + .p-togglebutton .p-button { background: #ffffff; border: 2px solid #d8dee9; color: #4c566a; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #81a1c1; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #eceff4; - border-color: #81a1c1; - color: #4c566a; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #81a1c1; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #5e81ac; border-color: #5e81ac; 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: #eceff4; + border-color: #81a1c1; + color: #4c566a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #81a1c1; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #81a1c1; border-color: #5e81ac; 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 #c0d0e0; + border-color: #81a1c1; + } + .p-togglebutton.p-invalid > .p-button { border-color: #bf616a; } .p-button { diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 6297946e72..553af1d71b 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -722,8 +722,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 14px; + height: 14px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #a5acb3; + border-radius: 1px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #a5acb3; + background: #ffffff; width: 14px; height: 14px; + color: #343a3f; + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 12px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 12px; + height: 12px; } .p-checkbox .p-checkbox-box { border: 2px solid #a5acb3; @@ -733,6 +781,7 @@ color: #343a3f; border-radius: 1px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,64 +792,140 @@ width: 12px; height: 12px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #1174c0; background: #1174c0; } - .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: #1174c0; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0e5d9a; background: #0e5d9a; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #1174c0; - } - .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 #90c9f5; border-color: #1174c0; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0e5d9a; - background: #0e5d9a; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #d8222f; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f4f8; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #1174c0; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f4f8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e5d9a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f4f8; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #1174c0; } - .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: #f2f4f8; } - .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: #0e5d9a; } - .p-chips .p-chips-multiple-container { - padding: 0.125rem 0.25rem; - 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: #f2f4f8; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #1174c0; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f4f8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0e5d9a; + } + .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: #1174c0; } - .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 #90c9f5; border-color: #1174c0; } + .p-chips .p-chips-multiple-container { + padding: 0.125rem 0.25rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.125rem 0.25rem; margin-right: 0.5rem; - background: #44a1d9; + background: #dee2e6; color: #343a3f; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #c8cbcf; + color: #343a3f; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +958,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 #a5acb3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 1px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #1174c0; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + .p-dropdown.p-variant-filled { + background: #f2f4f8; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f4f8; + } + .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.25rem; } @@ -858,7 +1074,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #697077; } - .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 +1116,6 @@ right: 0.25rem; color: #697077; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.5rem; - margin-right: -2.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.25rem 0; } @@ -919,14 +1128,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: #ffffff; background: #44a1d9; } - .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: #1174c0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #343a3f; background: #dde1e6; } + .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.25rem 0.5rem; @@ -939,18 +1162,6 @@ color: #343a3f; background: transparent; } - .p-input-filled .p-dropdown { - background: #f2f4f8; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f2f4f8; - } - .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: #dde1e6; color: #697077; @@ -1017,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } + .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: 2rem; height: 1.155rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #a5acb3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1035,27 +1282,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(0.825rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #929ba3; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #1174c0; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(0.825rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #929ba3; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #0f68ad; } - .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 #90c9f5; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #d8222f; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.3125rem 0.3125rem; } + .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: #343a3f; border: 1px solid #a5acb3; border-radius: 1px; + 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.25rem 0.5rem; @@ -1172,6 +1446,7 @@ } .p-listbox .p-listbox-list { padding: 0.25rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1456,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: #ffffff; background: #44a1d9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #90c9f5; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.25rem 0.5rem; @@ -1202,10 +1478,27 @@ color: #343a3f; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #1174c0; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #343a3f; + background: #dde1e6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #343a3f; background: #dde1e6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #343a3f; + background: #dde1e6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; + } .p-listbox.p-invalid { border-color: #d8222f; } @@ -1236,11 +1529,100 @@ color: #ffffff; background: #44a1d9; } + .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 #a5acb3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 1px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #1174c0; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.25rem; + .p-multiselect.p-variant-filled { + background: #f2f4f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f4f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.25rem 0.25rem; @@ -1278,22 +1666,12 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } - .p-multiselect .p-multiselect-clear-icon { - color: #697077; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #d8222f; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.125rem 0.25rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.25rem 0.25rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.25rem; - } .p-multiselect-panel { background: #ffffff; color: #343a3f; @@ -1310,9 +1688,6 @@ border-top-right-radius: 1px; border-top-left-radius: 1px; } - .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.25rem; } @@ -1320,7 +1695,11 @@ right: 0.25rem; color: #697077; } + .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: 1rem; height: 1rem; color: #878d96; @@ -1351,19 +1730,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: #ffffff; background: #44a1d9; } - .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: #1174c0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #343a3f; background: #dde1e6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #90c9f5; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,6 @@ color: #343a3f; background: transparent; } - .p-input-filled .p-multiselect { - background: #f2f4f8; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f2f4f8; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } @@ -1412,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #207f3b; } + .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: 14px; height: 14px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #a5acb3; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #a5acb3; background: #ffffff; @@ -1424,15 +1838,7 @@ color: #343a3f; 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: #1174c0; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #90c9f5; - border-color: #1174c0; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 8px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #1174c0; background: #1174c0; } - .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: #1174c0; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0e5d9a; background: #0e5d9a; - 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 #90c9f5; + border-color: #1174c0; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #d8222f; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f2f4f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #1174c0; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f2f4f8; } - .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: #0e5d9a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f4f8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #1174c0; } - .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: #f2f4f8; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #0e5d9a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #343a3f; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -1692,44 +2135,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 #a5acb3; + border-radius: 1px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #a5acb3; color: #343a3f; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #697077; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #dde1e6; - border-color: #a5acb3; - color: #343a3f; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #697077; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #1174c0; border-color: #1174c0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #dde1e6; + border-color: #a5acb3; + color: #343a3f; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #697077; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #0f68ad; border-color: #0f68ad; 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 #90c9f5; + border-color: #1174c0; + } + .p-togglebutton.p-invalid > .p-button { border-color: #d8222f; } .p-button { diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 157f054c9e..7bacbd9e13 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -722,8 +722,56 @@ background-color: #f4f4f4; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #a6a6a6; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; width: 20px; height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; @@ -733,6 +781,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,64 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #212121; - } - .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 #8dcdff; border-color: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .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: #f4f4f4; } - .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: #005b9f; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } + .p-chips { + display: inline-flex; + } + .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: #212121; } - .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 #8dcdff; border-color: #007ad9; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #e02365; + background: #c8c8c8; color: #333333; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #bababa; + color: #333333; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +958,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .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 #a6a6a6; 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: #212121; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .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.429rem; } @@ -858,7 +1074,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .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 +1116,6 @@ right: 0.429rem; color: #848484; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -919,14 +1128,28 @@ transition: background-color 0.2s, 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: #ffffff; background: #e02365; } - .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: #e02365; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } + .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.857rem; @@ -939,18 +1162,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1017,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .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: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1035,27 +1282,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 #8dcdff; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #007ad9; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #cccccc; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7b7b7; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #116fbf; } - .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 #8dcdff; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #333333; border: 1px solid #a6a6a6; 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.429rem 0.857rem; @@ -1172,6 +1446,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1456,16 @@ transition: background-color 0.2s, 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: #ffffff; background: #e02365; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1202,10 +1478,27 @@ color: #333333; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #e02365; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #333333; + background: #eaeaea; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #333333; + background: #eaeaea; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-listbox.p-invalid { border-color: #a80000; } @@ -1236,11 +1529,100 @@ color: #ffffff; background: #e02365; } + .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 #a6a6a6; 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: #212121; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1278,22 +1666,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #848484; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a80000; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1310,9 +1688,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.429rem; } @@ -1320,7 +1695,11 @@ right: 0.429rem; color: #848484; } + .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: #a6a6a6; @@ -1351,19 +1730,23 @@ transition: background-color 0.2s, 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: #ffffff; background: #e02365; } - .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: #e02365; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1412,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + .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: 1px solid #a6a6a6; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1424,15 +1838,7 @@ color: #333333; 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: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005b9f; background: #005b9f; - 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 #8dcdff; + border-color: #007ad9; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007ad9; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #005b9f; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #005b9f; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1692,44 +2135,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #dadada; border: 1px solid #dadada; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #007ad9; border-color: #007ad9; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #212121; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #116fbf; border-color: #116fbf; 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 #8dcdff; + border-color: #007ad9; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } .p-button { diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index e3fb6291ed..2eadc309e4 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -722,8 +722,56 @@ background-color: #f4f4f4; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #a6a6a6; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; width: 20px; height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; @@ -733,6 +781,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,67 +792,143 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #212121; - } - .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 #8dcdff; border-color: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .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: #f4f4f4; } - .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: #005b9f; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } + .p-chips { + display: inline-flex; + } + .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: #212121; } - .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 #8dcdff; border-color: #007ad9; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #007ad9; + background: #c8c8c8; color: #333333; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #bababa; + color: #333333; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .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 #a6a6a6; 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: #212121; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .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.429rem; } @@ -861,7 +1077,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .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; } @@ -903,13 +1119,6 @@ right: 0.429rem; color: #848484; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -922,14 +1131,28 @@ transition: background-color 0.2s, 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: #ffffff; background: #007ad9; } - .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: #007ad9; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } + .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.857rem; @@ -942,18 +1165,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .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: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1038,27 +1285,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 #8dcdff; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #007ad9; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #cccccc; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7b7b7; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #116fbf; } - .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 #8dcdff; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #333333; border: 1px solid #a6a6a6; 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.429rem 0.857rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: background-color 0.2s, 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: #ffffff; background: #007ad9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1205,10 +1481,27 @@ color: #333333; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #007ad9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #333333; + background: #eaeaea; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #333333; + background: #eaeaea; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-listbox.p-invalid { border-color: #a80000; } @@ -1239,11 +1532,100 @@ color: #ffffff; background: #007ad9; } + .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 #a6a6a6; 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: #212121; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #848484; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a80000; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1313,9 +1691,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.429rem; } @@ -1323,7 +1698,11 @@ right: 0.429rem; color: #848484; } + .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: #a6a6a6; @@ -1354,19 +1733,23 @@ transition: background-color 0.2s, 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: #ffffff; background: #007ad9; } - .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: #007ad9; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + .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: 1px solid #a6a6a6; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1427,15 +1841,7 @@ color: #333333; 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: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005b9f; background: #005b9f; - 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 #8dcdff; + border-color: #007ad9; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007ad9; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #005b9f; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #005b9f; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #dadada; border: 1px solid #dadada; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #007ad9; border-color: #007ad9; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #212121; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #116fbf; border-color: #116fbf; 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 #8dcdff; + border-color: #007ad9; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } .p-button { diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index b9949aab28..44c76afdfc 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -722,8 +722,56 @@ background-color: #f4f4f4; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #a6a6a6; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; width: 20px; height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #a6a6a6; @@ -733,6 +781,7 @@ color: #333333; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,67 +792,143 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #005b9f; background: #005b9f; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #212121; - } - .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 #8dcdff; border-color: #007ad9; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #005b9f; - background: #005b9f; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #a80000; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #007ad9; } - .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: #f4f4f4; } - .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: #005b9f; } .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #007ad9; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #005b9f; + } + .p-chips { + display: inline-flex; + } + .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: #212121; } - .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 #8dcdff; border-color: #007ad9; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #007ad9; + background: #c8c8c8; color: #333333; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #bababa; + color: #333333; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -836,11 +961,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .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 #a6a6a6; 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: #212121; @@ -851,6 +1055,18 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .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.429rem; } @@ -861,7 +1077,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #666666; } - .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; } @@ -903,13 +1119,6 @@ right: 0.429rem; color: #848484; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -922,14 +1131,28 @@ transition: background-color 0.2s, 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: #ffffff; background: #007ad9; } - .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: #007ad9; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } + .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.857rem; @@ -942,18 +1165,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1020,14 +1231,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .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: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1038,27 +1285,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 #8dcdff; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7b7b7; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #007ad9; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #cccccc; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7b7b7; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #116fbf; } - .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 #8dcdff; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #a80000; } .p-inputtext { @@ -1151,11 +1396,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #333333; border: 1px solid #a6a6a6; 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.429rem 0.857rem; @@ -1175,6 +1449,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1184,15 +1459,16 @@ transition: background-color 0.2s, 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: #ffffff; background: #007ad9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1205,10 +1481,27 @@ color: #333333; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #007ad9; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #333333; + background: #eaeaea; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #333333; background: #eaeaea; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #333333; + background: #eaeaea; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } .p-listbox.p-invalid { border-color: #a80000; } @@ -1239,11 +1532,100 @@ color: #ffffff; background: #007ad9; } + .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 #a6a6a6; 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: #212121; @@ -1254,8 +1636,14 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1281,22 +1669,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #848484; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #a80000; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1313,9 +1691,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.429rem; } @@ -1323,7 +1698,11 @@ right: 0.429rem; color: #848484; } + .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: #a6a6a6; @@ -1354,19 +1733,23 @@ transition: background-color 0.2s, 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: #ffffff; background: #007ad9; } - .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: #007ad9; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #333333; background: #eaeaea; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1382,15 +1765,6 @@ color: #333333; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #a80000; } @@ -1415,10 +1789,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + .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: 1px solid #a6a6a6; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #a6a6a6; background: #ffffff; @@ -1427,15 +1841,7 @@ color: #333333; 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: #212121; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #8dcdff; - border-color: #007ad9; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1443,39 +1849,76 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #007ad9; background: #007ad9; } - .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: #212121; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #005b9f; background: #005b9f; - 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 #8dcdff; + border-color: #007ad9; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #a80000; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #007ad9; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #005b9f; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #007ad9; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #005b9f; } .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1488,7 +1931,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e4018d; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -1701,44 +2144,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #dadada; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #dadada; border: 1px solid #dadada; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #212121; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #007ad9; border-color: #007ad9; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #212121; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #116fbf; border-color: #116fbf; 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 #8dcdff; + border-color: #007ad9; + } + .p-togglebutton.p-invalid > .p-button { border-color: #a80000; } .p-button { diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 766c60e810..64a1c245ac 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -722,8 +722,56 @@ background-color: #f4f4f4; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-checkbox { + width: 20px; + height: 20px; + } + .p-checkbox .p-checkbox-input { + border: 1px solid #dadada; + border-radius: 2px; + } + .p-checkbox .p-checkbox-box { + border: 1px solid #dadada; + background: #ffffff; width: 20px; height: 20px; + color: #666666; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 1px solid #dadada; @@ -733,6 +781,7 @@ color: #666666; border-radius: 2px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,64 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #7b95a3; background: #7b95a3; } - .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: #a6a6a6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #617c8a; background: #617c8a; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #a6a6a6; - } - .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 #e4e9ec; border-color: #7b95a3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #617c8a; - background: #617c8a; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e7a3a3; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #7b95a3; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #617c8a; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #7b95a3; } - .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: #f4f4f4; } - .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: #617c8a; } - .p-chips .p-chips-multiple-container { - padding: 0.2145rem 0.429rem; - 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-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #7b95a3; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #617c8a; + } + .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: #a6a6a6; } - .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 #e4e9ec; border-color: #7b95a3; } + .p-chips .p-chips-multiple-container { + padding: 0.2145rem 0.429rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.2145rem 0.429rem; margin-right: 0.5rem; - background: #afd3c8; + background: #dadada; color: #666666; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #cbcbcb; + color: #666666; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +958,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); } + .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 #dadada; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #a6a6a6; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + .p-dropdown.p-variant-filled { + background: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } + .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.429rem; } @@ -858,7 +1074,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #a6a6a6; } - .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 +1116,6 @@ right: 0.429rem; color: #a6a6a6; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 2.858rem; - margin-right: -2.858rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 1.858rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0; } @@ -919,14 +1128,28 @@ transition: background-color 0.2s, border-color 0.2s, 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: #385048; background: #afd3c8; } - .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: #aed3c7; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #666666; background: #f4f4f4; } + .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.857rem; @@ -939,18 +1162,6 @@ color: #666666; background: transparent; } - .p-input-filled .p-dropdown { - background: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1017,14 +1228,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } + .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: #ffffff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #7b95a3; @@ -1035,27 +1282,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); + .p-inputswitch.p-highlight .p-inputswitch-slider { + background: #afd3c8; } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; + .p-inputswitch.p-highlight .p-inputswitch-slider:before { + background: #385048; + transform: translateX(1.25rem); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: #d8dae2; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #afd3c8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - background: #385048; - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { - background: #afd3c8; + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e7a3a3; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .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: #666666; border: 1px solid #dadada; border-radius: 2px; + 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.429rem 0.857rem; @@ -1172,6 +1446,7 @@ } .p-listbox .p-listbox-list { padding: 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1456,16 @@ transition: background-color 0.2s, border-color 0.2s, 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: #385048; background: #afd3c8; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.857rem; @@ -1202,10 +1478,27 @@ color: #666666; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #aed3c7; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #666666; + background: #f4f4f4; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #666666; background: #f4f4f4; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #666666; + background: #f4f4f4; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7b95a3; + } .p-listbox.p-invalid { border-color: #e7a3a3; } @@ -1236,11 +1529,100 @@ color: #385048; background: #afd3c8; } + .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 #dadada; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 2px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #a6a6a6; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; } .p-multiselect .p-multiselect-label { padding: 0.429rem 0.429rem; @@ -1278,22 +1666,12 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } - .p-multiselect .p-multiselect-clear-icon { - color: #a6a6a6; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #e7a3a3; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.429rem 0.429rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.429rem; - } .p-multiselect-panel { background: #ffffff; color: #666666; @@ -1310,9 +1688,6 @@ border-top-right-radius: 2px; border-top-left-radius: 2px; } - .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.429rem; } @@ -1320,7 +1695,11 @@ right: 0.429rem; color: #a6a6a6; } + .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: #a6a6a6; @@ -1351,19 +1730,23 @@ transition: background-color 0.2s, border-color 0.2s, 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: #385048; background: #afd3c8; } - .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: #aed3c7; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #666666; background: #f4f4f4; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,6 @@ color: #666666; background: transparent; } - .p-input-filled .p-multiselect { - background: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f4f4f4; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f4f4f4; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } @@ -1412,10 +1786,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #a3e2c6; } + .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: 1px solid #dadada; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 1px solid #dadada; background: #ffffff; @@ -1424,15 +1838,7 @@ color: #666666; 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: #a6a6a6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #e4e9ec; - border-color: #7b95a3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #7b95a3; background: #7b95a3; } - .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: #a6a6a6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #617c8a; background: #617c8a; - 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 #e4e9ec; + border-color: #7b95a3; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e7a3a3; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #7b95a3; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f4f4f4; } - .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: #617c8a; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #7b95a3; } - .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: #f4f4f4; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #617c8a; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #666666; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f3b9b9; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -1692,44 +2135,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } - .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 #eaeaea; + border-radius: 2px; + } + .p-togglebutton .p-button { background: #eaeaea; border: 1px solid #eaeaea; color: #333333; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #666666; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #c8c8c8; - border-color: #c8c8c8; - color: #333333; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #666666; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #afd3c8; border-color: #afd3c8; color: #385048; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #385048; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #c8c8c8; + border-color: #c8c8c8; + color: #333333; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #666666; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #8dc8b5; border-color: #8dc8b5; color: #385048; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #385048; } - .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 #e4e9ec; + border-color: #7b95a3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e7a3a3; } .p-button { diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 98045fded0..7b0329d15a 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -722,8 +722,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #2196f3; background: #2196f3; } - .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: #2196f3; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #0b7ad1; background: #0b7ad1; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #2196f3; - } - .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 #a6d5fa; border-color: #2196f3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #0b7ad1; - background: #0b7ad1; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #2196f3; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #0b7ad1; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #2196f3; } - .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: #0b7ad1; } - .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: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #2196f3; + } + .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: #0b7ad1; + } + .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: #2196f3; } - .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 #a6d5fa; border-color: #2196f3; } + .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: #e3f2fd; + 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 +958,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: #2196f3; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196f3; } + .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 +1074,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 +1116,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 +1128,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: #e3f2fd; } - .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(33, 150, 243, 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 +1162,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 +1228,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 +1282,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 #a6d5fa; - } - .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: #2196f3; } - .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: #0d89ec; } - .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 #a6d5fa; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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: #e3f2fd; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 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 #a6d5fa; + border-color: #2196f3; + } .p-listbox.p-invalid { border-color: #f44336; } @@ -1236,11 +1529,100 @@ color: #495057; background: #e3f2fd; } + .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: #2196f3; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196f3; } - .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 +1666,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 +1688,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 +1695,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 +1730,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: #e3f2fd; } - .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(33, 150, 243, 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 #a6d5fa; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #2196f3; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a6d5fa; - border-color: #2196f3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #2196f3; background: #2196f3; } - .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: #2196f3; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #0b7ad1; background: #0b7ad1; - 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 #a6d5fa; + border-color: #2196f3; } .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: #2196f3; + } + .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: #0b7ad1; + } + .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: #2196f3; } - .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: #0b7ad1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -1692,44 +2135,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: #2196f3; border-color: #2196f3; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #0d89ec; border-color: #0d89ec; 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 #a6d5fa; + border-color: #2196f3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index c2747e8b6e..10171d736a 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -722,8 +722,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #4caf50; background: #4caf50; } - .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: #4caf50; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #3d8c40; background: #3d8c40; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #4caf50; - } - .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 #b7e0b8; border-color: #4caf50; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3d8c40; - background: #3d8c40; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #4caf50; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3d8c40; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #4caf50; } - .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: #3d8c40; } - .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: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #4caf50; + } + .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: #3d8c40; + } + .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: #4caf50; } - .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 #b7e0b8; border-color: #4caf50; } + .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: #e8f5e9; + 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 +958,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: #4caf50; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4caf50; } + .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 +1074,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 +1116,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 +1128,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: #e8f5e9; } - .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(76, 175, 80, 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 +1162,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 +1228,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 +1282,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 #b7e0b8; - } - .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: #4caf50; } - .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: #449e48; } - .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 #b7e0b8; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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: #e8f5e9; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 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 #b7e0b8; + border-color: #4caf50; + } .p-listbox.p-invalid { border-color: #f44336; } @@ -1236,11 +1529,100 @@ color: #495057; background: #e8f5e9; } + .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: #4caf50; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4caf50; } - .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 +1666,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 +1688,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 +1695,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 +1730,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: #e8f5e9; } - .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(76, 175, 80, 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 #b7e0b8; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #4caf50; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #b7e0b8; - border-color: #4caf50; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #4caf50; background: #4caf50; } - .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: #4caf50; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3d8c40; background: #3d8c40; - 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 #b7e0b8; + border-color: #4caf50; } .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: #4caf50; + } + .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: #3d8c40; + } + .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: #4caf50; } - .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: #3d8c40; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -1692,44 +2135,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: #4caf50; border-color: #4caf50; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #449e48; border-color: #449e48; 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 #b7e0b8; + border-color: #4caf50; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 8852a9417c..53ae1864f3 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -722,8 +722,56 @@ background-color: #ffffff; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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: #212529; + 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; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffc107; background: #ffc107; } - .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: #ffc107; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #d29d00; background: #d29d00; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffc107; - } - .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 #ffe69c; border-color: #ffc107; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #d29d00; - background: #d29d00; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffc107; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #d29d00; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ffc107; } - .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: #d29d00; } - .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: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffc107; + } + .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: #d29d00; + } + .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: #ffc107; } - .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 #ffe69c; border-color: #ffc107; } + .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: #fff3e0; + 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 +958,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: #ffc107; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #ffc107; } + .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 +1074,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 +1116,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 +1128,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: #fff3e0; } - .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(255, 193, 7, 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 +1162,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 +1228,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 +1282,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 #ffe69c; - } - .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: #ffc107; } - .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: #ecb100; } - .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 #ffe69c; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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: #fff3e0; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 193, 7, 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 #ffe69c; + border-color: #ffc107; + } .p-listbox.p-invalid { border-color: #f44336; } @@ -1236,11 +1529,100 @@ color: #495057; background: #fff3e0; } + .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: #ffc107; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #ffc107; } - .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 +1666,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 +1688,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 +1695,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 +1730,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: #fff3e0; } - .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(255, 193, 7, 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 #ffe69c; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #ffc107; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ffe69c; - border-color: #ffc107; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffc107; background: #ffc107; } - .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: #ffc107; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #d29d00; background: #d29d00; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #ffc107; } .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: #ffc107; + } + .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: #d29d00; + } + .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: #ffc107; } - .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: #d29d00; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -1692,44 +2135,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: #ffc107; border-color: #ffc107; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #ecb100; border-color: #ecb100; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #ffe69c; + border-color: #ffc107; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 1c70f39fa1..246eedc456 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; + } .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 0.2rem #df9eea; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7d1f8d; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #e74c3c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #e9ecef; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #f8f9fa; color: #495057; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index d5193b81eb..fbbce7d9f3 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -740,10 +740,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3e4053; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #3e4053; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #3e4053; background: #1d1e27; @@ -752,6 +781,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -762,64 +792,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #3e4053; + background: #1d1e27; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: hsl(234, 15%, 13%); + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #b19df7; background: #b19df7; } - .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: #b19df7; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9378f4; background: #9378f4; color: hsl(234, 15%, 13%); } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #b19df7; - } - .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 #e0d8fc; border-color: #b19df7; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #9378f4; - background: #9378f4; - color: hsl(234, 15%, 13%); - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ff9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3e4053; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #b19df7; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3e4053; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9378f4; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3e4053; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #b19df7; } - .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: #3e4053; } - .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: #9378f4; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #3e4053; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #b19df7; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #3e4053; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9378f4; + } + .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: #b19df7; } - .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 #e0d8fc; border-color: #b19df7; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(177, 157, 247, 0.16); + background: #3e4053; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #4c4d5f; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -852,11 +977,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: #1d1e27; border: 1px solid #3e4053; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #b19df7; @@ -867,6 +1071,18 @@ box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + .p-dropdown.p-variant-filled { + background: #3e4053; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #3e4053; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3e4053; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -877,7 +1093,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; } @@ -919,13 +1135,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -938,14 +1147,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: #b19df7; background: rgba(177, 157, 247, 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(177, 157, 247, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -958,18 +1181,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #3e4053; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #3e4053; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #3e4053; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1036,14 +1247,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } + .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: #3e4053; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1054,27 +1301,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 #e0d8fc; - } - .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: #b19df7; } - .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #a28af5; } - .p-inputswitch.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 #e0d8fc; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ff9a9a; } .p-inputtext { @@ -1167,11 +1412,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #282936; color: rgba(255, 255, 255, 0.87); border: 1px solid #3e4053; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1191,6 +1465,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1200,15 +1475,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: #b19df7; background: rgba(177, 157, 247, 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 #e0d8fc; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1221,10 +1497,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(177, 157, 247, 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 #e0d8fc; + border-color: #b19df7; + } .p-listbox.p-invalid { border-color: #ff9a9a; } @@ -1255,11 +1548,100 @@ color: #b19df7; background: rgba(177, 157, 247, 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: #1d1e27; border: 1px solid #3e4053; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #b19df7; @@ -1270,8 +1652,14 @@ box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #3e4053; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #3e4053; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3e4053; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1297,22 +1685,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #ff9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1329,9 +1707,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1339,7 +1714,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1370,19 +1749,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: #b19df7; background: rgba(177, 157, 247, 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(177, 157, 247, 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 #e0d8fc; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1398,15 +1781,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #3e4053; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #3e4053; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #3e4053; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } @@ -1431,10 +1805,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #3e4053; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #3e4053; background: #1d1e27; @@ -1443,15 +1857,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: #b19df7; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e0d8fc; - border-color: #b19df7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1459,36 +1865,73 @@ transition-duration: 0.2s; background-color: hsl(234, 15%, 13%); } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #b19df7; background: #b19df7; } - .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: #b19df7; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: hsl(234, 15%, 13%); + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ff9a9a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #3e4053; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #b19df7; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #3e4053; } - .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: #9378f4; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3e4053; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #b19df7; } - .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: #3e4053; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #9378f4; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1501,7 +1944,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -1711,44 +2154,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3e4053; } - .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 #3e4053; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #282936; border: 1px solid #3e4053; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #3e4053; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #b19df7; border-color: #b19df7; color: hsl(234, 15%, 13%); } - .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: hsl(234, 15%, 13%); } - .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: #3e4053; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #a28af5; border-color: #a28af5; color: hsl(234, 15%, 13%); } - .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: hsl(234, 15%, 13%); } - .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 #e0d8fc; + border-color: #b19df7; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ff9a9a; } .p-button { @@ -2198,6 +2675,54 @@ border-color: transparent; color: #eb9a9c; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #1d1e27; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #d2d2d4; + color: #1d1e27; + border-color: #d2d2d4; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #bbbcbe; + color: #1d1e27; + border-color: #bbbcbe; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #b19df7; background: transparent; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 7b0af01ff7..5951c08be2 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -740,10 +740,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d3dbe3; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d3dbe3; background: #ffffff; @@ -752,6 +781,7 @@ color: #043d75; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -762,64 +792,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d3dbe3; + background: #ffffff; + width: 22px; + height: 22px; + color: #043d75; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #7254f3; background: #7254f3; } - .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: #7254f3; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #5935f1; background: #5935f1; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #7254f3; - } - .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 #c7bbfa; border-color: #7254f3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #5935f1; - background: #5935f1; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ff6767; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f6f9fc; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #7254f3; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f6f9fc; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #5935f1; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f6f9fc; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #7254f3; } - .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: #f6f9fc; } - .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: #5935f1; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f6f9fc; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #7254f3; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f6f9fc; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #5935f1; + } + .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: #7254f3; } - .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 #c7bbfa; border-color: #7254f3; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #e2dcfc; + background: #dfe7ef; color: #043d75; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #d3dbe3; + color: #043d75; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -852,11 +977,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d3dbe3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #7254f3; @@ -867,6 +1071,18 @@ box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + .p-dropdown.p-variant-filled { + background: #f6f9fc; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f6f9fc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -877,7 +1093,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #708da9; } - .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; } @@ -919,13 +1135,6 @@ right: 0.75rem; color: #708da9; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -938,14 +1147,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: #7254f3; background: #e2dcfc; } - .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: #cbc0fa; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #043d75; background: #f6f9fc; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -958,18 +1181,6 @@ color: #043d75; background: transparent; } - .p-input-filled .p-dropdown { - background: #f6f9fc; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f6f9fc; - } - .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: #f6f9fc; color: #708da9; @@ -1036,14 +1247,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } + .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: #d3dbe3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1054,27 +1301,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 #c7bbfa; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b8c5d2; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #7254f3; } - .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: #b8c5d2; } - .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: #6545f2; } - .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 #c7bbfa; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ff6767; } .p-inputtext { @@ -1167,11 +1412,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #043d75; border: 1px solid #d3dbe3; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1191,6 +1465,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1200,15 +1475,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: #7254f3; background: #e2dcfc; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7bbfa; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1221,10 +1497,27 @@ color: #043d75; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #cbc0fa; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #043d75; + background: #f6f9fc; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #043d75; background: #f6f9fc; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #043d75; + background: #f6f9fc; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; + } .p-listbox.p-invalid { border-color: #ff6767; } @@ -1255,11 +1548,100 @@ color: #7254f3; background: #e2dcfc; } + .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 #d3dbe3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #7254f3; @@ -1270,8 +1652,14 @@ box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f6f9fc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f6f9fc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1297,22 +1685,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #708da9; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #ff6767; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #043d75; @@ -1329,9 +1707,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1339,7 +1714,11 @@ right: 0.75rem; color: #708da9; } + .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: #708da9; @@ -1370,19 +1749,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: #7254f3; background: #e2dcfc; } - .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: #cbc0fa; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #043d75; background: #f6f9fc; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7bbfa; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1398,15 +1781,6 @@ color: #043d75; background: transparent; } - .p-input-filled .p-multiselect { - background: #f6f9fc; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f6f9fc; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } @@ -1431,10 +1805,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d3dbe3; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d3dbe3; background: #ffffff; @@ -1443,15 +1857,7 @@ color: #043d75; 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: #7254f3; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #c7bbfa; - border-color: #7254f3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1459,36 +1865,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #7254f3; background: #7254f3; } - .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: #7254f3; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #5935f1; background: #5935f1; - 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 #c7bbfa; + border-color: #7254f3; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ff6767; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f6f9fc; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #7254f3; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f6f9fc; } - .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: #5935f1; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f6f9fc; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #7254f3; } - .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: #f6f9fc; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #5935f1; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #043d75; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1501,7 +1944,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ea5455; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -1711,44 +2154,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 #d3dbe3; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d3dbe3; color: #043d75; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #708da9; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f6f9fc; - border-color: #d3dbe3; - color: #043d75; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: #708da9; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #7254f3; border-color: #7254f3; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #f6f9fc; + border-color: #d3dbe3; + color: #043d75; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #708da9; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #6545f2; border-color: #6545f2; 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 #c7bbfa; + border-color: #7254f3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ff6767; } .p-button { @@ -2198,6 +2675,54 @@ border-color: transparent; color: #ea5455; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #212529; + border: 1px solid #212529; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #343a40; + color: #ffffff; + border-color: #343a40; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #043d75; + color: #ffffff; + border-color: #043d75; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + color: #212529; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #212529; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(33, 37, 41, 0.04); + border-color: transparent; + color: #212529; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(33, 37, 41, 0.16); + border-color: transparent; + color: #212529; + } .p-button.p-button-link { color: #5935f1; background: transparent; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 4bf4b31c86..e352778067 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -1,9 +1,6 @@ :root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, - "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji"; + --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --surface-a: #ffffff; --surface-b: #fafafa; --surface-c: #f4f4f5; @@ -752,10 +749,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 16px; height: 16px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d4d4d8; + border-radius: 0.375rem; + } .p-checkbox .p-checkbox-box { border: 2px solid #d4d4d8; background: #ffffff; @@ -764,6 +790,7 @@ color: #3f3f46; border-radius: 0.375rem; transition: none; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -774,64 +801,159 @@ width: 10px; height: 10px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #d4d4d8; + background: #ffffff; + width: 16px; + height: 16px; + color: #3f3f46; + border-radius: 0.375rem; + transition: none; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 10px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 10px; + height: 10px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #4f46e5; background: #4f46e5; } - .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: #d4d4d8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #4f46e5; background: #4f46e5; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #d4d4d8; - } - .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 #6366f1; border-color: #4f46e5; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #4f46e5; - background: #4f46e5; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f0a9a7; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #fafafa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #4f46e5; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #fafafa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #4f46e5; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #fafafa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #4f46e5; } - .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: #fafafa; } - .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: #4f46e5; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #fafafa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #4f46e5; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #fafafa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #4f46e5; + } + .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: #d4d4d8; } - .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 #6366f1; border-color: #4f46e5; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #eef2ff; + background: #e5e7eb; color: #3f3f46; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #d4d4d8; + color: #3f3f46; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -864,11 +986,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } + .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 #d4d4d8; transition: none; border-radius: 0.375rem; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #d4d4d8; @@ -879,6 +1080,18 @@ box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } + .p-dropdown.p-variant-filled { + background: #fafafa; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #fafafa; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -889,7 +1102,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #71717a; } - .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; } @@ -931,13 +1144,6 @@ right: 0.75rem; color: #71717a; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.25rem 0; } @@ -950,14 +1156,28 @@ transition: none; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #312e81; background: #eef2ff; } - .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: #e0e7ff; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #18181b; background: #f4f4f5; } + .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; @@ -970,18 +1190,6 @@ color: #3f3f46; background: transparent; } - .p-input-filled .p-dropdown { - background: #fafafa; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #fafafa; - } - .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: #fafafa; color: #71717a; @@ -1048,14 +1256,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } + .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: #d4d4d8; transition: none; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1066,27 +1310,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 #6366f1; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #bebec4; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #4f46e5; } - .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: #bebec4; } - .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: #4338ca; } - .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 #6366f1; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f0a9a7; } .p-inputtext { @@ -1179,11 +1421,40 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #3f3f46; border: 1px solid #d4d4d8; border-radius: 0.375rem; + transition: none; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 0.75rem; @@ -1203,6 +1474,7 @@ } .p-listbox .p-listbox-list { padding: 0.25rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1212,15 +1484,16 @@ transition: none; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #312e81; background: #eef2ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366f1; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1233,10 +1506,27 @@ color: #3f3f46; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #e0e7ff; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #18181b; + background: #f4f4f5; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #18181b; background: #f4f4f5; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #18181b; + background: #f4f4f5; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + border-color: #4f46e5; + } .p-listbox.p-invalid { border-color: #f0a9a7; } @@ -1267,11 +1557,100 @@ color: #312e81; background: #eef2ff; } + .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 #d4d4d8; transition: none; border-radius: 0.375rem; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #d4d4d8; @@ -1282,8 +1661,14 @@ box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #fafafa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #fafafa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1309,22 +1694,12 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } - .p-multiselect .p-multiselect-clear-icon { - color: #71717a; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #f0a9a7; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #3f3f46; @@ -1341,9 +1716,6 @@ border-top-right-radius: 0.375rem; border-top-left-radius: 0.375rem; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1351,7 +1723,11 @@ right: 0.75rem; color: #71717a; } + .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: #71717a; @@ -1382,19 +1758,23 @@ transition: none; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #312e81; background: #eef2ff; } - .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: #e0e7ff; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #18181b; background: #f4f4f5; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366f1; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1410,15 +1790,6 @@ color: #3f3f46; background: transparent; } - .p-input-filled .p-multiselect { - background: #fafafa; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #fafafa; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } @@ -1443,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #22c55e; } + .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: 16px; height: 16px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d4d4d8; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d4d4d8; background: #ffffff; @@ -1455,15 +1866,7 @@ color: #3f3f46; border-radius: 50%; transition: none; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #d4d4d8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #6366f1; - border-color: #4f46e5; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 6px; @@ -1471,36 +1874,73 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #4f46e5; background: #4f46e5; } - .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: #d4d4d8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #4f46e5; background: #4f46e5; - 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 #6366f1; + border-color: #4f46e5; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f0a9a7; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #fafafa; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #4f46e5; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #fafafa; } - .p-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: #4f46e5; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #fafafa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #4f46e5; } - .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: #fafafa; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #4f46e5; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #3f3f46; transition: none; @@ -1513,7 +1953,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #ef4444; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -1723,44 +2163,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 #d4d4d8; + border-radius: 0.375rem; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d4d4d8; color: #3f3f46; transition: none; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #71717a; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f4f4f5; - border-color: #d4d4d8; - color: #3f3f46; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #71717a; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #4f46e5; border-color: #4f46e5; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .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: #f4f4f5; + border-color: #d4d4d8; + color: #3f3f46; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #71717a; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #4338ca; border-color: #4338ca; 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 #6366f1; + border-color: #4f46e5; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f0a9a7; } .p-button { diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 72645b5831..13fc592684 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -722,8 +722,56 @@ background-color: #304562; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; width: 20px; height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #304562; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #2396f2; background: #2396f2; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #64b5f6; - } - .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 #93cbf9; border-color: #64b5f6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #2396f2; - background: #2396f2; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #64b5f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #2396f2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #64b5f6; } - .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: #2396f2; } - .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: #64b5f6; + } + .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: #2396f2; + } + .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: #64b5f6; } - .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 #93cbf9; border-color: #64b5f6; } + .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(100, 181, 246, 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 +958,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: #64b5f6; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } + .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 +1074,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 +1116,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 +1128,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(100, 181, 246, 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(100, 181, 246, 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 +1162,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 +1228,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 +1282,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 #93cbf9; - } - .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: #64b5f6; } - .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: #43a5f4; } - .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 #93cbf9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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(100, 181, 246, 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 #93cbf9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 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 #93cbf9; + border-color: #64b5f6; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1529,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 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: #64b5f6; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64b5f6; } - .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 +1666,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 +1688,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 +1695,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 +1730,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(100, 181, 246, 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(100, 181, 246, 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 #93cbf9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #64b5f6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #93cbf9; - border-color: #64b5f6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #64b5f6; background: #64b5f6; } - .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: #64b5f6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #2396f2; background: #2396f2; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64b5f6; } .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: #64b5f6; + } + .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: #2396f2; + } + .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: #64b5f6; } - .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: #2396f2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -1692,44 +2135,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: #64b5f6; border-color: #64b5f6; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #43a5f4; border-color: #43a5f4; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #93cbf9; + border-color: #64b5f6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 1a64d7b0f2..d9766a9714 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -722,8 +722,56 @@ background-color: #304562; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; width: 20px; height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #304562; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #54b358; background: #54b358; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #81c784; - } - .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 #a7d8a9; border-color: #81c784; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #54b358; - background: #54b358; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #81c784; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #54b358; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #81c784; } - .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: #54b358; } - .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: #81c784; + } + .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: #54b358; + } + .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: #81c784; } - .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 #a7d8a9; border-color: #81c784; } + .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(129, 199, 132, 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 +958,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: #81c784; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } + .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 +1074,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 +1116,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 +1128,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(129, 199, 132, 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(129, 199, 132, 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 +1162,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 +1228,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 +1282,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 #a7d8a9; - } - .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: #81c784; } - .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: #6abd6e; } - .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 #a7d8a9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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(129, 199, 132, 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 #a7d8a9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 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 #a7d8a9; + border-color: #81c784; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1529,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 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: #81c784; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81c784; } - .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 +1666,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 +1688,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 +1695,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 +1730,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(129, 199, 132, 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(129, 199, 132, 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 #a7d8a9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #81c784; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #a7d8a9; - border-color: #81c784; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #81c784; background: #81c784; } - .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: #81c784; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #54b358; background: #54b358; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81c784; } .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: #81c784; + } + .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: #54b358; + } + .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: #81c784; } - .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: #54b358; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -1692,44 +2135,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: #81c784; border-color: #81c784; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #6abd6e; border-color: #6abd6e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #a7d8a9; + border-color: #81c784; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 24cdee7b0e..80626138fd 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -722,8 +722,56 @@ background-color: #304562; } .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-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; width: 20px; height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; } .p-checkbox .p-checkbox-box { border: 2px solid #304562; @@ -733,6 +781,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 +792,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ffc50c; background: #ffc50c; color: #212529; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ffd54f; - } - .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 #ffe284; border-color: #ffd54f; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ffc50c; - background: #ffc50c; - color: #212529; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ffd54f; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ffc50c; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ffd54f; } - .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: #ffc50c; } - .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: #ffd54f; + } + .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: #ffc50c; + } + .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: #ffd54f; } - .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 #ffe284; border-color: #ffd54f; } + .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(255, 213, 79, 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 +958,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: #ffd54f; @@ -848,6 +1052,18 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } + .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 +1074,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 +1116,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 +1128,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(255, 213, 79, 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(255, 213, 79, 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 +1162,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 +1228,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 +1282,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 #ffe284; - } - .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: #ffd54f; } - .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: #ffcd2e; } - .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 #ffe284; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1148,11 +1393,40 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .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 +1446,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 +1456,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(255, 213, 79, 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 #ffe284; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1478,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 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 #ffe284; + border-color: #ffd54f; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1529,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 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: #ffd54f; @@ -1251,8 +1633,14 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #ffd54f; } - .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 +1666,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 +1688,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 +1695,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 +1730,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(255, 213, 79, 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(255, 213, 79, 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 #ffe284; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1762,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 +1786,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 +1838,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: #ffd54f; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #ffe284; - border-color: #ffd54f; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,36 +1846,73 @@ transition-duration: 0.2s; background-color: #212529; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ffd54f; background: #ffd54f; } - .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: #ffd54f; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ffc50c; background: #ffc50c; - color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #212529; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #ffd54f; } .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: #ffd54f; + } + .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: #ffc50c; + } + .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: #ffd54f; } - .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: #ffc50c; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1482,7 +1925,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -1692,44 +2135,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: #ffd54f; border-color: #ffd54f; color: #212529; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #212529; } - .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: #ffcd2e; border-color: #ffcd2e; color: #212529; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #212529; } - .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 #ffe284; + border-color: #ffd54f; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 077bb262b5..d037c35db7 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -415,6 +415,12 @@ .p-calendar.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -623,7 +629,8 @@ box-shadow: 0 0 0 1px #cf95d9; } @media screen and (max-width: 769px) { - .p-datepicker table th, .p-datepicker table td { + .p-datepicker table th, + .p-datepicker table td { padding: 0; } } @@ -1460,9 +1467,26 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1475,7 +1499,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #f48fb1; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2865,10 +2889,6 @@ border: 0 none; padding: 0; } - .p-dataview.p-dataview-list .p-dataview-content > .p-grid > div { - border: solid #304562; - border-width: 0 0 1px 0; - } .p-dataview .p-dataview-footer { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index b0ca6c107b..0de8514948 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -747,10 +747,58 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #263238; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #263238; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #263238; + background: #0e1315; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.3s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #263238; background: #0e1315; @@ -759,6 +807,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -769,64 +818,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9eade6; background: #9eade6; } - .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: #2d3e44; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #7f93de; background: #7f93de; color: #121212; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #2d3e44; - } - .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 #9eade6; border-color: #9eade6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #7f93de; - background: #7f93de; - color: #121212; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f78c79; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #263238; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9eade6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #263238; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7f93de; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #263238; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9eade6; } - .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: #263238; } - .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: #7f93de; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #263238; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9eade6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #263238; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7f93de; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2d3e44; } - .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 #9eade6; border-color: #9eade6; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: rgba(158, 173, 230, 0.16); + background: #263238; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #2d3e44; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -859,11 +984,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: #0e1315; border: 2px solid #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #2d3e44; @@ -874,6 +1078,18 @@ box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + .p-dropdown.p-variant-filled { + background: #263238; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #263238; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #263238; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -884,7 +1100,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; } @@ -926,13 +1142,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0.5rem; } @@ -945,14 +1154,28 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .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: #9eade6; background: rgba(158, 173, 230, 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(158, 173, 230, 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(158, 173, 230, 0.08); } + .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; @@ -965,18 +1188,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #263238; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #263238; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #263238; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1043,14 +1254,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } + .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: 6px; + } .p-inputswitch .p-inputswitch-slider { background: #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1061,27 +1308,25 @@ border-radius: 6px; transition-duration: 0.3s; } - .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 #9eade6; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(158, 173, 230, 0.08); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #9eade6; } - .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(158, 173, 230, 0.08); } - .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: #8fa0e2; } - .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 #9eade6; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f78c79; } .p-inputtext { @@ -1174,11 +1419,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #161d21; color: rgba(255, 255, 255, 0.87); border: 2px solid #263238; border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1.5rem; @@ -1198,6 +1472,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0.5rem; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0 0 4px 0; @@ -1207,15 +1482,16 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .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: #9eade6; background: rgba(158, 173, 230, 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 #9eade6; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1228,10 +1504,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(158, 173, 230, 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(158, 173, 230, 0.08); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(158, 173, 230, 0.08); } + .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(158, 173, 230, 0.08); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; + } .p-listbox.p-invalid { border-color: #f78c79; } @@ -1262,11 +1555,100 @@ color: #9eade6; background: rgba(158, 173, 230, 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: #0e1315; border: 2px solid #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #2d3e44; @@ -1277,8 +1659,14 @@ box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #263238; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #263238; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #263238; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1304,22 +1692,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.857rem; - } .p-multiselect.p-invalid.p-component { border-color: #f78c79; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1336,9 +1714,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1346,7 +1721,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1377,19 +1756,23 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .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: #9eade6; background: rgba(158, 173, 230, 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(158, 173, 230, 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(158, 173, 230, 0.08); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #9eade6; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1405,15 +1788,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #263238; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #263238; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #263238; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } @@ -1438,10 +1812,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #cede9c; } + .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 #263238; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #263238; background: #0e1315; @@ -1450,15 +1864,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #2d3e44; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #9eade6; - border-color: #9eade6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1466,36 +1872,73 @@ transition-duration: 0.3s; background-color: #121212; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9eade6; background: #9eade6; } - .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: #2d3e44; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #7f93de; background: #7f93de; - color: #121212; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #121212; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f78c79; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #263238; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #9eade6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #263238; } - .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: #7f93de; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #263238; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #9eade6; } - .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: #263238; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #7f93de; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1508,7 +1951,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -1718,44 +2161,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #263238; } - .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: 2px solid #263238; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #161d21; border: 2px solid #263238; color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(158, 173, 230, 0.08); - border-color: #263238; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: rgba(158, 173, 230, 0.16); border-color: rgba(158, 173, 230, 0.16); color: #9eade6; } - .p-togglebutton.p-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: #9eade6; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(158, 173, 230, 0.08); + border-color: #263238; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: rgba(158, 173, 230, 0.24); border-color: rgba(158, 173, 230, 0.24); color: #9eade6; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #9eade6; } - .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 #9eade6; + border-color: #9eade6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f78c79; } .p-button { @@ -2205,6 +2682,54 @@ border-color: transparent; color: #e693a9; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #0e1315; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #cfd0d0; + color: #0e1315; + border-color: #cfd0d0; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #b7b8b9; + color: #0e1315; + border-color: #b7b8b9; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #7f93de; background: transparent; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 7c7cd2eae5..876283887a 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -747,10 +747,39 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .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-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #e1e1e1; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #e1e1e1; background: #ffffff; @@ -759,6 +788,7 @@ color: #6c6c6c; border-radius: 6px; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.3s; @@ -769,64 +799,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #e1e1e1; + background: #ffffff; + width: 20px; + height: 20px; + color: #6c6c6c; + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.3s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #5472d4; background: #5472d4; } - .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: #cecece; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #3c5ece; background: #3c5ece; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #cecece; - } - .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.1rem #bbc7ee; border-color: #91a4e3; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #3c5ece; - background: #3c5ece; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f88c79; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f2f2; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #5472d4; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f2f2; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3c5ece; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f2f2; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #5472d4; } - .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: #f2f2f2; } - .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: #3c5ece; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f2f2f2; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #5472d4; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f2f2f2; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3c5ece; + } + .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: #cecece; } - .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.1rem #bbc7ee; border-color: #91a4e3; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.75rem; margin-right: 0.5rem; - background: #ced6f1; + background: #ebebeb; color: #6c6c6c; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e1e1e1; + color: #6c6c6c; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -859,11 +984,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: 2px solid #e1e1e1; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #cecece; @@ -874,6 +1078,18 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + .p-dropdown.p-variant-filled { + background: #f2f2f2; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f2f2; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f2f2f2; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -884,7 +1100,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #898989; } - .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; } @@ -926,13 +1142,6 @@ right: 0.75rem; color: #898989; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0.5rem; } @@ -945,14 +1154,28 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .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: #585858; background: #ced6f1; } - .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: #aebbe8; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #6c6c6c; background: #edf0fa; } + .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; @@ -965,18 +1188,6 @@ color: #6c6c6c; background: transparent; } - .p-input-filled .p-dropdown { - background: #f2f2f2; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f2f2f2; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #f2f2f2; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1043,14 +1254,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } + .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: 6px; + } .p-inputswitch .p-inputswitch-slider { background: #cecece; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1061,27 +1308,25 @@ border-radius: 6px; transition-duration: 0.3s; } - .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.1rem #bbc7ee; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b9b9b9; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #5472d4; } - .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: #b9b9b9; } - .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: #4868d1; } - .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.1rem #bbc7ee; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f88c79; } .p-inputtext { @@ -1174,11 +1419,40 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #6c6c6c; border: 2px solid #e1e1e1; border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1.5rem; @@ -1198,6 +1472,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0.5rem; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0 0 4px 0; @@ -1207,15 +1482,16 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .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: #585858; background: #ced6f1; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bbc7ee; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1228,10 +1504,27 @@ color: #6c6c6c; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: #aebbe8; + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #6c6c6c; + background: #edf0fa; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #6c6c6c; background: #edf0fa; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #6c6c6c; + background: #edf0fa; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; + } .p-listbox.p-invalid { border-color: #f88c79; } @@ -1262,11 +1555,100 @@ color: #585858; background: #ced6f1; } + .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: 2px solid #e1e1e1; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #cecece; @@ -1277,8 +1659,14 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f2f2f2; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f2f2; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f2f2f2; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.75rem; @@ -1304,22 +1692,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #898989; - right: 2.857rem; - } .p-multiselect.p-invalid.p-component { border-color: #f88c79; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #6c6c6c; @@ -1336,9 +1714,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1346,7 +1721,11 @@ right: 0.75rem; color: #898989; } + .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: #898989; @@ -1377,19 +1756,23 @@ transition: box-shadow 0.3s; border-radius: 6px; } + .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: #585858; background: #ced6f1; } - .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: #aebbe8; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #6c6c6c; background: #edf0fa; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bbc7ee; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1405,15 +1788,6 @@ color: #6c6c6c; background: transparent; } - .p-input-filled .p-multiselect { - background: #f2f2f2; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f2f2f2; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #f2f2f2; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } @@ -1438,10 +1812,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #8bae2c; } + .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 #e1e1e1; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #e1e1e1; background: #ffffff; @@ -1450,15 +1864,7 @@ color: #6c6c6c; border-radius: 50%; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #cecece; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.1rem #bbc7ee; - border-color: #91a4e3; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1466,36 +1872,73 @@ transition-duration: 0.3s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #5472d4; background: #5472d4; } - .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: #cecece; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #3c5ece; background: #3c5ece; - 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.1rem #bbc7ee; + border-color: #91a4e3; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f88c79; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f2f2f2; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #5472d4; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f2f2f2; } - .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: #3c5ece; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f2f2; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #5472d4; } - .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: #f2f2f2; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #3c5ece; } + .p-rating { + position: relative; + display: flex; + align-items: center; + } + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .p-rating.p-readonly .p-rating-item { + cursor: default; + } .p-rating { gap: 0.5rem; } + .p-rating .p-rating-item { + outline-color: transparent; + border-radius: 50%; + } .p-rating .p-rating-item .p-rating-icon { color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -1508,7 +1951,7 @@ .p-rating .p-rating-item .p-rating-icon.p-rating-cancel { color: #df7e6c; } - .p-rating .p-rating-item:focus { + .p-rating .p-rating-item.p-focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -1718,44 +2161,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } - .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: 2px solid #e1e1e1; + border-radius: 6px; + } + .p-togglebutton .p-button { background: #ffffff; border: 2px solid #e1e1e1; color: #6c6c6c; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #898989; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #edf0fa; - border-color: #e1e1e1; - color: #6c6c6c; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #898989; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ced6f1; border-color: #ced6f1; color: #585858; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #585858; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #edf0fa; + border-color: #e1e1e1; + color: #6c6c6c; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #898989; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #bdc7ec; border-color: #bdc7ec; color: #585858; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton: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: #585858; } - .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.1rem #bbc7ee; + border-color: #91a4e3; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f88c79; } .p-button { @@ -2205,6 +2682,54 @@ border-color: transparent; color: #d45472; } + .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #3b3b3b; + border: 1px solid #3b3b3b; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #585858; + color: #ffffff; + border-color: #585858; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-buttonset.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #6c6c6c; + color: #ffffff; + border-color: #6c6c6c; + } + .p-button.p-button-contrast.p-button-outlined, .p-buttonset.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #3b3b3b; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(59, 59, 59, 0.04); + color: #3b3b3b; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(59, 59, 59, 0.16); + color: #3b3b3b; + border: 2px solid; + } + .p-button.p-button-contrast.p-button-text, .p-buttonset.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #3b3b3b; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(59, 59, 59, 0.04); + border-color: transparent; + color: #3b3b3b; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-buttonset.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(59, 59, 59, 0.16); + border-color: transparent; + color: #3b3b3b; + } .p-button.p-button-link { color: #3c5ece; background: transparent; From 3467073515f7868a128a1b59739115efa19c3825 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Mon, 11 Mar 2024 17:45:16 +0300 Subject: [PATCH 26/31] Material themes updated --- public/themes/md-dark-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/md-dark-indigo/theme.css | 89 ++++++++++++-------- public/themes/md-light-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/md-light-indigo/theme.css | 89 ++++++++++++-------- public/themes/mdc-dark-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/mdc-dark-indigo/theme.css | 89 ++++++++++++-------- public/themes/mdc-light-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/mdc-light-indigo/theme.css | 89 ++++++++++++-------- 8 files changed, 416 insertions(+), 296 deletions(-) diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 1277e7ab4a..a0c830b0f1 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #CE93D8; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index d59fcea4f8..ac7a67e2ba 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #9FA8DA; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 45e572ac79..29d01ef76c 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: #757575; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { 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.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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(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 { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index f2fac2e36e..145f1a6912 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + 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); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #3F51B5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index d510f3659a..9c4193369a 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #CE93D8; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index ad3f9dd87b..1545989214 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #9FA8DA; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 7cf48a7d64..c5052c7cdd 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: #757575; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { 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.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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(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 { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index f6bced63db..172ddd05c5 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + 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); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #3F51B5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } From 8da810c21303b047ff4db2f07a059838d49af4a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 12 Mar 2024 17:04:46 +0300 Subject: [PATCH 27/31] Removed tailwind preset --- .../doc/metergroup/theming/tailwinddoc.js | 145 ------------------ pages/metergroup/index.js | 14 -- 2 files changed, 159 deletions(-) delete mode 100644 components/doc/metergroup/theming/tailwinddoc.js diff --git a/components/doc/metergroup/theming/tailwinddoc.js b/components/doc/metergroup/theming/tailwinddoc.js deleted file mode 100644 index 0b6acf21f0..0000000000 --- a/components/doc/metergroup/theming/tailwinddoc.js +++ /dev/null @@ -1,145 +0,0 @@ -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 = { - metergroup: { - root: ({ props }) => ({ - class: [ - // Flexbox - 'flex gap-4', - - { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' } - ] - }), - metercontainer: ({ props }) => ({ - class: [ - // Flexbox - 'flex', - - { 'flex-col': props.orientation === 'vertical' }, - - // Sizing - { 'w-2 h-full': props.orientation === 'vertical' }, - { 'h-2': props.orientation === 'horizontal' }, - - // Colors - 'bg-gray-200 dark:bg-gray-700', - - // Border Radius - 'rounded-lg' - ] - }), - meter: ({ props }) => ({ - class: [ - // Shape - 'border-0', - - // Rounded Corners - Horizontal - { - 'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal' - }, - - // Rounded Corners - Vertical - { - 'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical' - }, - - // Colors - 'bg-primary-500 dark:bg-primary-400' - ] - }), - labellist: ({ props }) => ({ - class: [ - // Display & Flexbox - 'flex flex-wrap', - - { 'gap-4': props.labelOrientation === 'horizontal' }, - - { 'gap-2': props.labelOrientation === 'vertical' }, - - { 'flex-col': props.labelOrientation === 'vertical' }, - - // Conditional Alignment - Horizontal - { - 'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end', - 'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start' - }, - - // Conditional Alignment - Vertical - { - 'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end', - 'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start' - }, - - // List Styling - 'm-0 p-0 list-none' - ] - }), - labellistitem: { - class: [ - // Flexbox - 'inline-flex', - 'items-center', - 'gap-2' - ] - }, - labellisttype: { - class: [ - // Display - 'inline-flex', - - // Background Color - 'bg-primary-500 dark:bg-primary-400', - - // Size - 'w-2 h-2', - - // Rounded Shape - 'rounded-full' - ] - } - } -} - ` - }; - - const code2 = { - javascript: ` -import React from 'react'; -import { MeterGroup } from 'primereact/MeterGroup'; - -export default function UnstyledDemo() { - const values = [ - { value: 20, color: '#FFC107' }, - { value: 40, color: '#007BE5' }, - { value: 10, color: '#E91E63' }, - { value: 30, color: '#4CAF50' } - ]; - - - 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/pages/metergroup/index.js b/pages/metergroup/index.js index 53dac7ca43..ca86dabad1 100644 --- a/pages/metergroup/index.js +++ b/pages/metergroup/index.js @@ -10,9 +10,7 @@ import { MinMaxDoc } from '@/components/doc/metergroup/minmaxdoc'; import { TemplateDoc } from '@/components/doc/metergroup/templatedoc'; import { AccessibilityDoc } from '@/components/doc/metergroup/accessibilitydoc'; import { Wireframe } from '@/components/doc/metergroup/pt/wireframe'; -import { PTDoc } from '@/components/doc/metergroup/pt/ptdoc'; import { StyledDoc } from '@/components/doc/metergroup/theming/styleddoc'; -import { TailwindDoc } from '@/components/doc/metergroup/theming/tailwinddoc'; const MessagesDemo = () => { const docs = [ @@ -81,18 +79,6 @@ const MessagesDemo = () => { 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 02775af54bfde3cfa09a681f75b5cfdfb8464de7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 12 Mar 2024 17:12:01 +0300 Subject: [PATCH 28/31] Updated themes --- public/themes/md-dark-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/md-dark-indigo/theme.css | 89 ++++++++++++-------- public/themes/md-light-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/md-light-indigo/theme.css | 89 ++++++++++++-------- public/themes/mdc-dark-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/mdc-dark-indigo/theme.css | 89 ++++++++++++-------- public/themes/mdc-light-deeppurple/theme.css | 89 ++++++++++++-------- public/themes/mdc-light-indigo/theme.css | 89 ++++++++++++-------- 8 files changed, 416 insertions(+), 296 deletions(-) diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 1277e7ab4a..a0c830b0f1 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #CE93D8; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index d59fcea4f8..ac7a67e2ba 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #9FA8DA; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 45e572ac79..29d01ef76c 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: #757575; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { 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.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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(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 { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index f2fac2e36e..145f1a6912 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + 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); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #3F51B5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index d510f3659a..9c4193369a 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #CE93D8; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #CE93D8; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #CE93D8; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index ad3f9dd87b..1545989214 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: hsla(0, 0%, 100%, 0.7); border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: hsla(0, 0%, 100%, 0.7); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #9FA8DA; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #1e1e1e; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #1e1e1e; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); - } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #9FA8DA; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid hsla(0, 0%, 100%, 0.7); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #9FA8DA; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #1e1e1e; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #1e1e1e; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #1e1e1e; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #262626; border-color: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 7cf48a7d64..c5052c7cdd 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + border-color: #757575; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { 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.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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(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 { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #673AB7; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { 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: #673AB7; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index f6bced63db..172ddd05c5 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -7153,21 +7153,15 @@ border-radius: 50%; transition: box-shadow 0.2s; } + .p-checkbox .p-checkbox-input { + border-radius: 2px; + } .p-checkbox .p-checkbox-box { border-color: #757575; border-radius: 2px; position: relative; } - .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: #757575; - } - .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: #757575; - } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before { + .p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon.pi-check:before { content: ""; position: absolute; top: 6px; @@ -7178,22 +7172,37 @@ transform-origin: 0% 100%; animation: checkbox-check 125ms 50ms linear forwards; } - .p-checkbox:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #757575; } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + 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); } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { + border-color: #3F51B5; + } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #ffffff; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) { background-color: #ffffff; } @keyframes checkbox-check { @@ -7453,16 +7462,16 @@ transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before { 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.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } - .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before { + .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); } .p-fieldset .p-fieldset-legend { @@ -7715,31 +7724,37 @@ border-radius: 50%; transition: box-shadow 0.2s; } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid #757575; + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { + box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border: 2px solid #757575; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { - border-color: #3F51B5; - } - .p-radiobutton:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { + box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); } - .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border: 2px solid #757575; } - .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { + .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); } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { + border-color: #3F51B5; + } + .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) { + background-color: #ffffff; + } .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) { background-color: #ffffff; } .p-rating { @@ -8062,11 +8077,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } - .p-togglebutton.p-button:focus { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { background: #e0e0e1; border-color: #e0e0e1; } - .p-togglebutton.p-button:focus.p-highlight { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button { background: #d9d8d9; border-color: #d9d8d9; } From f2de5136b688887ba1c2bab4e75ee6da5ba9c131 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 12 Mar 2024 17:23:43 +0300 Subject: [PATCH 29/31] Synced other components --- components/lib/tree/TreeBase.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js index 19c1c17068..a619b4e360 100644 --- a/components/lib/tree/TreeBase.js +++ b/components/lib/tree/TreeBase.js @@ -6,6 +6,7 @@ const classes = { loadingIcon: 'p-tree-loading-icon', loadingOverlay: 'p-tree-loading-overlay p-component-overlay', searchIcon: 'p-tree-filter-icon', + emptyMessage: 'p-treenode p-tree-empty-message', filterContainer: 'p-tree-filter-container', input: 'p-tree-filter p-inputtext p-component', header: 'p-tree-header', From f1b8237ffb210500e9bf44f99c5715e7bb61bf08 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Tue, 12 Mar 2024 14:26:43 +0000 Subject: [PATCH 30/31] Update API doc --- components/doc/common/apidoc/index.json | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 9f7e6a33d3..108fd7eb3e 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -34594,7 +34594,7 @@ "default": "" }, { - "name": "labelListRenderer", + "name": "labelList", "optional": true, "readonly": false, "type": "Function", @@ -34625,7 +34625,7 @@ "description": "The maximum value for the MeterGroup." }, { - "name": "meterRenderer", + "name": "meter", "optional": true, "readonly": false, "type": "Function", @@ -34647,6 +34647,22 @@ "default": "'horizontal'", "description": "The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'." }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "MeterGroupPassThroughOptions", + "default": "", + "description": "Uses to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + }, { "name": "start", "optional": true, @@ -34708,7 +34724,7 @@ }, "MeterGroupPassThroughOptions": { "description": "Custom passthrough(pt) options.", - "relatedProp": "MeterGroupProps.pt", + "relatedProp": "pt", "props": [ { "name": "root", From 9129ad02c219226ff42eda744100c0e4f9421685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Tue, 12 Mar 2024 17:50:10 +0300 Subject: [PATCH 31/31] Updated tailwind states --- components/doc/togglebutton/theming/tailwinddoc.js | 5 +---- components/lib/checkbox/checkbox.d.ts | 11 ----------- components/lib/inputswitch/inputswitch.d.ts | 12 ------------ components/lib/radiobutton/radiobutton.d.ts | 12 ------------ .../lib/tristatecheckbox/tristatecheckbox.d.ts | 11 ----------- 5 files changed, 1 insertion(+), 50 deletions(-) diff --git a/components/doc/togglebutton/theming/tailwinddoc.js b/components/doc/togglebutton/theming/tailwinddoc.js index e7a56bd0e4..fcb24f40e7 100644 --- a/components/doc/togglebutton/theming/tailwinddoc.js +++ b/components/doc/togglebutton/theming/tailwinddoc.js @@ -7,14 +7,11 @@ export function TailwindDoc(props) { basic: ` const Tailwind = { togglebutton: { - root: ({ props, state }) => ({ + root: ({ props }) => ({ className: classNames( 'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative', 'px-4 py-3 rounded-md text-base w-36', 'border transition duration-200 ease-in-out', - { - 'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': state.focused - }, { 'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80': !props.checked, diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts index 8ddcb1f8df..db831cb5a4 100644 --- a/components/lib/checkbox/checkbox.d.ts +++ b/components/lib/checkbox/checkbox.d.ts @@ -22,7 +22,6 @@ export declare type CheckboxPassThroughType = PassThroughType = PassThroughType = PassThroughType = PassThroughType