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* diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 4e125afd50..9f7e6a33d3 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -34566,6 +34566,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/basicdoc.js b/components/doc/metergroup/basicdoc.js new file mode 100644 index 0000000000..c6052ad59a --- /dev/null +++ b/components/doc/metergroup/basicdoc.js @@ -0,0 +1,55 @@ +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 { MeterGroup } from 'primereact/metergroup'; + +export default function BasicDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function BasicDemo() { + const values = [{ label: 'Space used', value: 15 }]; + + return ( +
+ +
+ ) +} + ` + }; + + const values = [{ label: 'Space used', value: 15 }]; + + 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/icondoc.js b/components/doc/metergroup/icondoc.js new file mode 100644 index 0000000000..6c854c3698 --- /dev/null +++ b/components/doc/metergroup/icondoc.js @@ -0,0 +1,68 @@ +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: '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 ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function IconDemo() { + 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 ( +
+ +
+ ) +} + ` + }; + + 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..74897fb8da --- /dev/null +++ b/components/doc/metergroup/labeldoc.js @@ -0,0 +1,71 @@ +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: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; + + return ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function LabelDemo() { + 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 ( +
+ +
+ ) +} + ` + }; + + 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..8bb78ce7e1 --- /dev/null +++ b/components/doc/metergroup/minmaxdoc.js @@ -0,0 +1,70 @@ +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: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; + + return ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function MinMaxDemo() { + 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 ( +
+ +
+ ) +} + ` + }; + + 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..580a13540a --- /dev/null +++ b/components/doc/metergroup/multipledoc.js @@ -0,0 +1,68 @@ +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: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } + ]; + + return ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function MultipleDemo() { + 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 ( +
+ +
+ ) +} + ` + }; + + 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/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..2bfcccfa8c --- /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 ( + <> + +
+ metergroup +
+ + ); +}; diff --git a/components/doc/metergroup/templatedoc.js b/components/doc/metergroup/templatedoc.js new file mode 100644 index 0000000000..2680477e05 --- /dev/null +++ b/components/doc/metergroup/templatedoc.js @@ -0,0 +1,226 @@ +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 meter = (props, attr) => ; + + const labelList = ({ 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: meter } + ]; + + return ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function TemplateDemo() { + const meter = (props: any, attr: any) => ( + + ); + + const start = ({ totalPercent }: {totalPercent: number}) => ( +
+ Storage + + {totalPercent}% + + 1TB +
+ ); + + const end = ( +
+
+ ); + + const labelList = ({ 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: meter, + }, + ]; + + return ( +
+ +
+ ) +} + ` + }; + + const meter = (props, attr) => ; + + const labelList = ({ 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: meter } + ]; + + 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/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/verticaldoc.js b/components/doc/metergroup/verticaldoc.js new file mode 100644 index 0000000000..13c2578acc --- /dev/null +++ b/components/doc/metergroup/verticaldoc.js @@ -0,0 +1,70 @@ +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: 'Apps', color: '#34d399', value: 24 }, + { label: 'Messages', color: '#fbbf24', value: 16 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 12 } + ]; + + return ( +
+ +
+ ) +} + `, + typescript: ` +import React, { useEffect, useRef } from 'react'; +import { MeterGroup } from 'primereact/metergroup'; + +export default function VerticalDemo() { + 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 ( +
+ +
+ ) +} + ` + }; + + 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/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js new file mode 100644 index 0000000000..6960f187fd --- /dev/null +++ b/components/lib/metergroup/MeterGroup.js @@ -0,0 +1,160 @@ +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, start, end, meter, labelList } = props; + + const mergeProps = useMergeProps(); + const { ptm, cx, isUnstyled } = MeterGroupBase.setMetaData({ + props, + ...props.__parentMetadata, + context: { + disabled: props.disabled + } + }); + + useHandleStyle(MeterGroupBase.css.styles, isUnstyled, { name: 'progressbar' }); + + let totalPercent = 0; + let precentages = []; + + values.map((item) => { + totalPercent += item.value; + precentages.push(Math.round((item.value / totalPercent) * 100)); + }); + + const calculatePercentage = (meterValue = 0) => { + const percentageOfItem = ((meterValue - 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 calculatedPercantage = calculatePercentage(item.value); + const meterInlineStyles = { + backgroundColor: item.color, + width: orientation === 'horizontal' ? calculatedPercantage + '%' : 'auto', + height: orientation === 'vertical' ? calculatedPercantage + '%' : 'auto' + }; + + const meterProps = mergeProps( + { + className: cx('meter'), + style: meterInlineStyles + }, + ptm('meter') + ); + + if (meter || item.meterTemplate) { + const meterTemplateProps = mergeProps( + { + className: cx('meter') + }, + ptm('meter') + ); + + return ObjectUtils.getJSXElement(item.meterTemplate || meter, { ...item, percentage: calculatedPercantage, index }, meterTemplateProps); + } else { + 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 && `(${item?.value}%)`} + +
    2. + ); + })} +
+ ); + }; + + const templateProps = { + totalPercent, + precentages, + values + }; + + const labelElement = ObjectUtils.getJSXElement(labelList || createLabelList, { values, totalPercent }); + + return ( +
+ {labelPosition === 'start' && labelElement} + {start && ObjectUtils.getJSXElement(start, templateProps)} + {createMeters()} + {end && ObjectUtils.getJSXElement(end, templateProps)} + {labelPosition === 'end' && labelElement} +
+ ); +}; diff --git a/components/lib/metergroup/MeterGroupBase.js b/components/lib/metergroup/MeterGroupBase.js new file mode 100644 index 0000000000..3815e8ef46 --- /dev/null +++ b/components/lib/metergroup/MeterGroupBase.js @@ -0,0 +1,96 @@ +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 { + position: relative; + overflow: hidden; + } + + .p-metergroup-vertical.p-metergroup { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meter-container { + flex-direction: column; + } + + .p-metergroup-meter-container { + 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-label-list-vertical { + flex-direction: column; + } + + .p-metergroup-label-list-horizontal { + flex-direction: row; + } + + .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', + start: null, + end: null, + meter: null, + labelList: null + }, + 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..3c270885df --- /dev/null +++ b/components/lib/metergroup/metergroup.d.ts @@ -0,0 +1,183 @@ +/** + * + * MeterGroup displays scalar measurements within a known range. + * + * [Live Demo](https://www.primereact.org/metergroup/) + * + * @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'; +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 MeterGroupPassThroughType = PassThroughType; +export declare type MeterGroupPassThroughTransitionType = ReactCSSTransitionProps | ((options: MeterGroupPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined; + +/** + * Defines current options in MeterGroup component. + */ +export interface MeterGroupContext { + /** + * Current disabled state of the component as a boolean. + * @defaultValue false + */ + disabled: boolean; +} + +/** + * Custom passthrough(pt) option method. + */ +export interface MeterGroupPassThroughMethodOptions { + props: MeterGroupProps; + context: MeterGroupContext; +} + +/** + * Custom passthrough(pt) options. + * @see {@link MeterGroupProps.pt} + */ +export interface MeterGroupPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: MeterGroupPassThroughType>; + /** + * Used to pass attributes to the label list's DOM element. + */ + labellist?: MeterGroupPassThroughType>; + /** + * Used to pass attributes to the label list item's DOM element. + */ + labellistitem?: MeterGroupPassThroughType>; + /** + * Used to pass attributes to the label list type's DOM element. + */ + labellisttype?: MeterGroupPassThroughType>; + /** + * Used to pass attributes to the label's DOM element. + */ + label?: MeterGroupPassThroughType>; + /** + * Used to pass attributes to the meter container's DOM element. + */ + metercontainer?: MeterGroupPassThroughType>; + /** + * Used to pass attributes to the meter's DOM element. + */ + meter?: MeterGroupPassThroughType>; +} + +interface MeterGroupValue { + value?: number; + label?: string | HTMLElement; + color?: string; + [key: string]: any; +} + +interface CustomRenderProps { + totaLPercent: number; + percentages: number[]; + values: MeterGroupValue[]; +} + +/** + * Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component. + * @group Properties + */ +interface MeterGroupProps { + /** + * Additional CSS classes to apply to the MeterGroup. + */ + className?: string; + + /** + * An array of values to be represented by the MeterGroup. + */ + values?: MeterGroupValue[]; + + /** + * The minimum value for the MeterGroup. + * @defaultValue 0 + */ + min?: number; + + /** + * The maximum value for the MeterGroup. + * @defaultValue 100 + */ + max?: number; + + /** + * The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'. + * @defaultValue 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + + /** + * The position of the label. Can be either 'start' or 'end'. + * @defaultValue 'end' + */ + labelPosition?: 'start' | 'end'; + + /** + * The orientation of the label. Can be either 'horizontal' or 'vertical'. + * @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 + */ + start?: (props: CustomRenderProps) => ReactNode; + + /** + * A function to render custom end label. + * @param {CustomRenderProps} prop - Custom Render Props + */ + end?: (props: CustomRenderProps) => ReactNode; + + /** + * A function to render a custom meter. + * @param {CustomRenderProps} prop - Custom Render Props + */ + meter?: (props: CustomRenderProps) => ReactNode; + + /** + * A function to render a custom label list. + * @param {CustomRenderProps} prop - Custom Render Props + */ + labelList?: (props: CustomRenderProps) => ReactNode; +} + +/** + * **PrimeReact - MeterGroup** + * + * _MeterGroup is an extension to standard input element with theming and keyfiltering._ + * + * [Live Demo](https://www.primereact.org/metergroup/) + * --- --- + * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png) + * + * @group Component + */ +export declare class MeterGroup extends React.Component {} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 9e376cb93f..b4da94b585 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -2158,6 +2158,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 new file mode 100644 index 0000000000..ca86dabad1 --- /dev/null +++ b/pages/metergroup/index.js @@ -0,0 +1,88 @@ +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'; +import { TemplateDoc } from '@/components/doc/metergroup/templatedoc'; +import { AccessibilityDoc } from '@/components/doc/metergroup/accessibilitydoc'; +import { Wireframe } from '@/components/doc/metergroup/pt/wireframe'; +import { StyledDoc } from '@/components/doc/metergroup/theming/styleddoc'; + +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 + }, + { + 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 + } + ]; + + return ; +}; + +export default MessagesDemo; diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 3f65aa7466..c375c85e1f 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #383838; + background: #121212; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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: #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,31 +1846,51 @@ 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 { @@ -1967,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 3f44d9b827..e20c2bafd6 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #383838; + background: #121212; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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: #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,31 +1846,51 @@ 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 { @@ -1967,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 abd50a6c65..7773af6477 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #383838; + background: #121212; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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: #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,31 +1846,51 @@ 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 { @@ -1967,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/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 274cb79480..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,31 +1849,51 @@ 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 { @@ -1976,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 { diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index ea273b88c8..67294f0743 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -722,8 +722,56 @@ 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; @@ -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,47 +792,80 @@ 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-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,31 +1849,51 @@ 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 { @@ -1976,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 { diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 0d0b6e3c51..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-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-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-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 { @@ -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,31 +1846,51 @@ 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 { @@ -1967,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 e9d885b3c2..3c98fe3d0c 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -739,8 +739,56 @@ 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; @@ -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,42 +809,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fde68a; + } + .p-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-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: #424b57; } - .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: #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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index ae6a517c2d..7e7ad0c287 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -739,8 +739,56 @@ 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; @@ -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,42 +809,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #bfdbfe; + } + .p-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-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: #424b57; } - .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: #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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 75460e4588..0370c7e57e 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -739,8 +739,56 @@ 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; @@ -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,42 +809,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a5f3fc; + } + .p-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-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: #424b57; } - .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: #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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 93fee7d503..15f9960115 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -739,8 +739,56 @@ 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; @@ -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,42 +809,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a7f3d0; + } + .p-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-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: #424b57; } - .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: #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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index ab7752402d..227618f06c 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -739,8 +739,56 @@ 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; @@ -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,42 +809,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #c7d2fe; + } + .p-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-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: #424b57; } - .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: #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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index f6222da83a..64601078a8 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -739,8 +739,56 @@ 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; @@ -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,42 +809,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #fbcfe8; + } + .p-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-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: #424b57; } - .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: #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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index df8987ed69..7897cc8ed3 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -739,8 +739,56 @@ 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; @@ -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,42 +809,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #99f6e4; + } + .p-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-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: #424b57; } - .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: #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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 432ed8b0ab..ff91a0bb64 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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index ee9929f239..adc2756489 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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 6e25bba864..ad70f3f678 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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 634e3781aa..95933f4bb0 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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 176652dbfd..2f3f787e3f 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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 8d00461ef3..c5bcbada70 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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 1027a31df7..ccc915989c 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,31 +1863,51 @@ 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 { @@ -1984,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 { diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 3c00680356..01ddf4e0a1 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1849,51 @@ 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 { @@ -1976,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 1ef12dea3b..62ac651699 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1849,51 @@ 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 { @@ -1976,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 4b0b99062c..c0533f7d1d 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1849,51 @@ 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 { @@ -1976,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 94ec5f22fe..bcb6374466 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #4b4b4b; + background: #191919; + width: 20px; + height: 20px; + color: #dedede; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1849,51 @@ 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 { @@ -1976,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 e0e1a6ab9f..8aaecffed5 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -742,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); @@ -753,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; @@ -763,42 +812,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } + .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: #CE93D8; } - .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: hsla(0, 0%, 100%, 0.08); } - .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: #CE93D8; } .p-chips { @@ -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(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-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 { @@ -1690,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; @@ -1702,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; @@ -1718,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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 dd8f4fd023..b4d8375d48 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -742,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); @@ -753,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; @@ -763,42 +812,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .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-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: hsla(0, 0%, 100%, 0.08); } - .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: #9FA8DA; } .p-chips { @@ -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(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-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 { @@ -1690,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; @@ -1702,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; @@ -1718,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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 2a4b48344d..55fe91819b 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,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: #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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #673AB7; + } + .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-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: #ececec; } - .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: #673AB7; } .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(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 { @@ -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: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1718,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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 feda24ec6e..46ba455ecb 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3F51B5; + } + .p-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-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: #ececec; } - .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: #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,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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 4238a38ff4..2019bec822 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -742,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); @@ -753,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; @@ -763,42 +812,75 @@ 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #CE93D8; + } + .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: #CE93D8; } - .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: hsla(0, 0%, 100%, 0.08); } - .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: #CE93D8; } .p-chips { @@ -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(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-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 { @@ -1690,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; @@ -1702,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; @@ -1718,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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 59c746dcb9..38cdd92c0d 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -742,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); @@ -753,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; @@ -763,42 +812,75 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: hsla(0, 0%, 100%, 0.08); + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #9FA8DA; + } + .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-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: hsla(0, 0%, 100%, 0.08); } - .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: #9FA8DA; } .p-chips { @@ -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(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-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 { @@ -1690,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; @@ -1702,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; @@ -1718,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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 982dcead88..acbb1950f9 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,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: #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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #673AB7; + } + .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-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: #ececec; } - .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: #673AB7; } .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(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 { @@ -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: #673AB7; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 10px; @@ -1718,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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 7db5dc1b5f..29af34f9d0 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #ececec; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #3F51B5; + } + .p-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-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: #ececec; } - .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: #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,32 +1866,65 @@ 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 { position: relative; @@ -1987,44 +2168,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 { @@ -7029,21 +7244,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; @@ -7054,22 +7263,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 { @@ -7329,16 +7553,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 { @@ -7591,31 +7815,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 { @@ -7938,11 +8168,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/mira/theme.css b/public/themes/mira/theme.css index 67b20f13c6..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,31 +1868,51 @@ 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 { @@ -1989,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 9803495615..553af1d71b 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -721,10 +721,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: 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; @@ -733,6 +762,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 +773,94 @@ width: 12px; height: 12px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #a5acb3; + background: #ffffff; + width: 14px; + height: 14px; + color: #343a3f; + border-radius: 1px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 12px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 12px; + height: 12px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1846,51 @@ 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 { @@ -1967,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 5332055c02..7bacbd9e13 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; + width: 20px; + height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1846,51 @@ 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 { @@ -1967,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 a60afe59c7..2eadc309e4 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; + width: 20px; + height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1849,51 @@ 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 { @@ -1976,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 325fdfcb4d..44c76afdfc 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,99 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #a6a6a6; + background: #ffffff; + width: 20px; + height: 20px; + color: #333333; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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 { @@ -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,31 +1849,51 @@ 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 { @@ -1976,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 a6614f4e3c..64a1c245ac 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 1px solid #dadada; + background: #ffffff; + width: 20px; + height: 20px; + color: #666666; + border-radius: 2px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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,31 +1846,51 @@ 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 { @@ -1967,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 74df840254..7b0329d15a 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -721,10 +721,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 #ced4da; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -733,6 +762,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 +773,94 @@ 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: #495057; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b6bfc8; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #0d89ec; } - .p-inputswitch.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,31 +1846,51 @@ 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 { @@ -1967,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 be2d4936a0..10171d736a 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -721,10 +721,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 #ced4da; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -733,6 +762,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 +773,94 @@ 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: #495057; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b6bfc8; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #449e48; } - .p-inputswitch.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,31 +1846,51 @@ 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 { @@ -1967,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 dce5b0c37d..53ae1864f3 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -721,10 +721,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 #ced4da; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -733,6 +762,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 +773,94 @@ 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: #495057; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b6bfc8; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #ecb100; } - .p-inputswitch.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,31 +1846,51 @@ 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 { @@ -1967,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/soho-dark/theme.css b/public/themes/soho-dark/theme.css index aa88f4205c..fbbce7d9f3 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -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,6 +800,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,42 +811,75 @@ 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(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-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,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; @@ -1717,31 +1865,51 @@ 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 { @@ -1986,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 { - 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 { + .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: #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 { diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 55d3760bc8..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,31 +1865,51 @@ 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 { @@ -1986,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 { diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 74ab005936..e352778067 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -750,8 +750,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: 16px; + height: 16px; + } + .p-checkbox .p-checkbox-input { + border: 2px solid #d4d4d8; + border-radius: 0.375rem; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d4d4d8; + background: #ffffff; width: 16px; height: 16px; + color: #3f3f46; + border-radius: 0.375rem; + transition: none; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 10px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 10px; + height: 10px; } .p-checkbox .p-checkbox-box { border: 2px solid #d4d4d8; @@ -761,6 +809,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 +820,75 @@ width: 10px; height: 10px; } - .p-checkbox .p-checkbox-box.p-highlight { + .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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #fafafa; + } + .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-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: #fafafa; } - .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: #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,31 +1874,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #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 { @@ -1995,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 577e30e079..13fc592684 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #304562; + background: #17212f; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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: #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,31 +1846,51 @@ 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 { @@ -1967,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 7948b4f03b..d9766a9714 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #304562; + background: #17212f; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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: #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,31 +1846,51 @@ 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 { @@ -1967,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 805236338e..80626138fd 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -721,10 +721,39 @@ .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; @@ -733,6 +762,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 +773,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #304562; + background: #17212f; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #212529; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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.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: #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,31 +1846,51 @@ 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 { @@ -1967,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/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 68024b99cc..0de8514948 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -747,10 +747,39 @@ .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; @@ -759,6 +788,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 +799,94 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #263238; + background: #0e1315; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.3s; + color: #121212; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { 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-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #263238; + } + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7f93de; + } + .p-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-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: #263238; } - .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: #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.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(158, 173, 230, 0.08); + } + .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,31 +1872,51 @@ 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 { @@ -1993,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 { diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 312be7cb8f..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,42 +799,94 @@ 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-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.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b9b9b9; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #4868d1; } - .p-inputswitch.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,31 +1872,51 @@ 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 { @@ -1993,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 {