diff --git a/src/app/components/autocomplete/autocomplete.interface.ts b/src/app/components/autocomplete/autocomplete.interface.ts index 659e2c882d6..b38cf56552d 100644 --- a/src/app/components/autocomplete/autocomplete.interface.ts +++ b/src/app/components/autocomplete/autocomplete.interface.ts @@ -37,7 +37,7 @@ export interface AutoCompleteDropdownClickEvent { * @see {@link AutoComplete.onSelect} * @group Events */ -export interface AutoCompleteOnSelectEvent { +export interface AutoCompleteSelectEvent { /** * Browser event. */ diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index f7b00499d9e..7ce3ba92bee 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -40,7 +40,7 @@ import { SpinnerIcon } from 'primeng/icons/spinner'; import { TimesIcon } from 'primeng/icons/times'; import { ChevronDownIcon } from 'primeng/icons/chevrondown'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; -import { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteOnSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface'; +import { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface'; export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -611,10 +611,10 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr @Output() completeMethod: EventEmitter = new EventEmitter(); /** * Callback to invoke when a suggestion is selected. - * @param {AutoCompleteOnSelectEvent} event - custom select event. + * @param {AutoCompleteSelectEvent} event - custom select event. * @group Emits */ - @Output() onSelect: EventEmitter = new EventEmitter(); + @Output() onSelect: EventEmitter = new EventEmitter(); /** * Callback to invoke when a selected value is removed. * @param {AutoCompleteUnselectEvent} event - custom unselect event. diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts index bddf241b0ab..0808ac847c4 100755 --- a/src/app/components/dataview/dataview.ts +++ b/src/app/components/dataview/dataview.ts @@ -72,18 +72,16 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da [showPageLinks]="showPageLinks" [styleClass]="paginatorStyleClass" > +
-
- - - -
-
- - {{ emptyMessageLabel }} - - -
+ + +
+
+ + {{ emptyMessageLabel }} + +
@@ -320,9 +318,9 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU _value: Nullable; - listItemTemplate: Nullable>; + listTemplate: Nullable>; - gridItemTemplate: Nullable>; + gridTemplate: Nullable>; itemTemplate: Nullable>; @@ -393,11 +391,13 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU (this.templates as QueryList).forEach((item) => { switch (item.getType()) { case 'listItem': - this.listItemTemplate = item.template; + case 'list': + this.listTemplate = item.template; break; case 'gridItem': - this.gridItemTemplate = item.template; + case 'grid': + this.gridTemplate = item.template; break; case 'paginatorleft': @@ -444,11 +444,11 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU updateItemTemplate() { switch (this.layout) { case 'list': - this.itemTemplate = this.listItemTemplate; + this.itemTemplate = this.listTemplate; break; case 'grid': - this.itemTemplate = this.gridItemTemplate; + this.itemTemplate = this.gridTemplate; break; } } diff --git a/src/app/components/inputswitch/inputswitch.interface.ts b/src/app/components/inputswitch/inputswitch.interface.ts index 9d7164b9a60..b9ab1377d62 100644 --- a/src/app/components/inputswitch/inputswitch.interface.ts +++ b/src/app/components/inputswitch/inputswitch.interface.ts @@ -4,7 +4,7 @@ import { InputSwitch } from './inputswitch'; * @see {@link InputSwitch.onChange} * @group Events */ -export interface InputSwitchOnChangeEvent { +export interface InputSwitchChangeEvent { /** * Browser event. */ diff --git a/src/app/components/inputswitch/inputswitch.ts b/src/app/components/inputswitch/inputswitch.ts index 9390d594981..a86257d3d37 100755 --- a/src/app/components/inputswitch/inputswitch.ts +++ b/src/app/components/inputswitch/inputswitch.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { InputSwitchOnChangeEvent } from './inputswitch.interface'; +import { InputSwitchChangeEvent } from './inputswitch.interface'; export const INPUTSWITCH_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -110,10 +110,10 @@ export class InputSwitch { @Input() ariaLabelledBy: string | undefined; /** * Callback to invoke when the on value change. - * @param {InputSwitchOnChangeEvent} event - Custom change event. + * @param {InputSwitchChangeEvent} event - Custom change event. * @group Emits */ - @Output() onChange: EventEmitter = new EventEmitter(); + @Output() onChange: EventEmitter = new EventEmitter(); @ViewChild('input') input!: ElementRef; diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index e36e8a8a48e..08691fd6dca 100755 --- a/src/app/components/multiselect/multiselect.ts +++ b/src/app/components/multiselect/multiselect.ts @@ -501,10 +501,10 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * @group Props * @defaultValue 3 */ - @Input() set maxSelectedLabels(val: number) { + @Input() set maxSelectedLabels(val: number | null | undefined) { this._maxSelectedLabels = val; } - get maxSelectedLabels(): number { + get maxSelectedLabels(): number | null | undefined { return this._maxSelectedLabels; } /** @@ -1958,7 +1958,11 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft let value = this.modelValue().filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey())); this.updateModel(value, event); - + this.onChange.emit({ + originalEvent: event, + value: value, + itemValue: optionValue + }); event && event.stopPropagation(); } diff --git a/src/app/components/tree/tree.css b/src/app/components/tree/tree.css index a8c4215090a..56fcd7e37df 100755 --- a/src/app/components/tree/tree.css +++ b/src/app/components/tree/tree.css @@ -90,67 +90,6 @@ border: 0 none; } - .p-tree-horizontal { - width: auto; - padding-left: 0; - padding-right: 0; - overflow: auto; - } - - .p-tree.p-tree-horizontal table, - .p-tree.p-tree-horizontal tr, - .p-tree.p-tree-horizontal td { - border-collapse: collapse; - margin: 0; - padding: 0; - vertical-align: middle; - } - - .p-tree-horizontal .p-treenode-content { - font-weight: normal; - padding: 0.4em 1em 0.4em 0.2em; - display: flex; - align-items: center; - } - - .p-tree-horizontal .p-treenode-parent .p-treenode-content { - font-weight: normal; - white-space: nowrap; - } - - .p-tree.p-tree-horizontal .p-treenode { - background: url('./images/line.gif') repeat-x scroll center center transparent; - padding: 0.25rem 2.5rem; - } - - .p-tree.p-tree-horizontal .p-treenode.p-treenode-leaf, - .p-tree.p-tree-horizontal .p-treenode.p-treenode-collapsed { - padding-right: 0; - } - - .p-tree.p-tree-horizontal .p-treenode-children { - padding: 0; - margin: 0; - } - - .p-tree.p-tree-horizontal .p-treenode-connector { - width: 1px; - } - - .p-tree.p-tree-horizontal .p-treenode-connector-table { - height: 100%; - width: 1px; - } - - .p-tree.p-tree-horizontal .p-treenode-connector-line { - background: url('./images/line.gif') repeat-y scroll 0 0 transparent; - width: 1px; - } - - .p-tree.p-tree-horizontal table { - height: 0; - } - /* Virtual Scroll */ .p-scroller .p-tree-container { overflow: visible; diff --git a/src/app/showcase/doc/accessibility/formcontrolsdoc.ts b/src/app/showcase/doc/accessibility/formcontrolsdoc.ts index 9817648ea78..7395f4b61ff 100644 --- a/src/app/showcase/doc/accessibility/formcontrolsdoc.ts +++ b/src/app/showcase/doc/accessibility/formcontrolsdoc.ts @@ -10,9 +10,9 @@ import { Code } from '../../domain/code'; with space key as well to trigger.

-

On the other hand, a fancy css based button using a div has no keyboard or screen reader support.

+

On the other hand, a fancy css based button using a div has no keyboard or screen reader support.

-

+

tabindex is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form controls should be preferred.

diff --git a/src/app/showcase/doc/accessibility/semantichtmldoc.ts b/src/app/showcase/doc/accessibility/semantichtmldoc.ts index ac80183cb6f..105f5f55c26 100644 --- a/src/app/showcase/doc/accessibility/semantichtmldoc.ts +++ b/src/app/showcase/doc/accessibility/semantichtmldoc.ts @@ -10,7 +10,7 @@ import { Code } from '../../domain/code'; div elements with classes are used. Consider the following example that do not mean too much for readers.

-

Same layout can be achieved using the semantic elements with screen reader support built-in.

+

Same layout can be achieved using the semantic elements with screen reader support built-in.

` diff --git a/src/app/showcase/doc/accessibility/waiariadoc.ts b/src/app/showcase/doc/accessibility/waiariadoc.ts index cd2b20f3398..28764ffbb6b 100644 --- a/src/app/showcase/doc/accessibility/waiariadoc.ts +++ b/src/app/showcase/doc/accessibility/waiariadoc.ts @@ -16,23 +16,23 @@ import { Code } from '../../domain/code';

Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.

-

+

A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be read by a reader.

-

One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of aria-labelledby as a replacement of the label tag with htmlFor.

+

One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of aria-labelledby as a replacement of the label tag with htmlFor.

-

+

However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of p-sr-only that hides the elements from the user but not from the screen reader.

-

A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.

+

A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.

- +
diff --git a/src/app/showcase/doc/dataview/basicdoc.ts b/src/app/showcase/doc/dataview/basicdoc.ts index 570c5c4f564..1b7f375535e 100644 --- a/src/app/showcase/doc/dataview/basicdoc.ts +++ b/src/app/showcase/doc/dataview/basicdoc.ts @@ -7,32 +7,31 @@ import { ProductService } from '../../service/productservice'; selector: 'data-view-basic-demo', template: ` -

- DataView requires a value to display along with an pTemplate that receives an object in the collection to return content. The root element should have the PrimeFlex Grid classes e.g. col-12 to define how items are - displayed. -

+

DataView requires a value to display along with a list template that receives an object in the collection to return content.
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -69,26 +68,29 @@ export class BasicDoc { } code: Code = { - basic: ` - -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + basic: ` + + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{'$'+ product.price }} -
@@ -99,25 +101,27 @@ export class BasicDoc { html: `
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{'$'+ product.price }} -
diff --git a/src/app/showcase/doc/dataview/dataviewdoc.module.ts b/src/app/showcase/doc/dataview/dataviewdoc.module.ts index b4d6e557ab3..8dc0680aed5 100644 --- a/src/app/showcase/doc/dataview/dataviewdoc.module.ts +++ b/src/app/showcase/doc/dataview/dataviewdoc.module.ts @@ -14,13 +14,12 @@ import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { LayoutDoc } from './layoutdoc'; import { PaginationDoc } from './paginationdoc'; -import { PrimeflexDoc } from './primeflexdoc'; import { SortingDoc } from './sortingdoc'; import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, DataViewModule, DropdownModule, ButtonModule, RouterModule, RatingModule, TagModule, FormsModule], exports: [AppDocModule], - declarations: [ImportDoc, PrimeflexDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, StyleDoc, AccessibilityDoc] + declarations: [ImportDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, StyleDoc, AccessibilityDoc] }) export class DataViewDocModule {} diff --git a/src/app/showcase/doc/dataview/layoutdoc.ts b/src/app/showcase/doc/dataview/layoutdoc.ts index 0ce7c12b32c..c22eb59498f 100644 --- a/src/app/showcase/doc/dataview/layoutdoc.ts +++ b/src/app/showcase/doc/dataview/layoutdoc.ts @@ -9,7 +9,7 @@ import { ProductService } from '../../service/productservice';

DataView supports list and grid display modes defined with the layout property. The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you - may use your own UI to switch modes as well. As in list layout, the grid layout also requires PrimeFlex Grid classes to define how the grid is displayed per screen sizes. + may use your own UI to switch modes as well.

@@ -19,48 +19,52 @@ import { ProductService } from '../../service/productservice';
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ product.name }}
+ +
+ + + {{ product.category }} + + +
+
+
+ {{ '$' + product.price }} +
-
-
- {{ '$' + product.price }} -
- -
-
-
- - - {{ product.category }} - - -
-
- -
{{ product.name }}
- -
-
- {{ '$' + product.price }} - + +
+
+
+
+ + + {{ product.category }} + + +
+
+ +
{{ product.name }}
+ +
+
+ {{ '$' + product.price }} + +
@@ -104,65 +108,10 @@ export class LayoutDoc {
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - -
-
-
- {{ '$' + product.price }} - -
-
-
-
- - -
-
-
- - - {{ product.category }} - - -
-
- -
{{ product.name }}
- -
-
- {{ '$' + product.price }} - -
-
-
- -`, - - html: ` -
- - -
- -
- - -
-
+ +
+
+
@@ -183,9 +132,11 @@ export class LayoutDoc {
- - -
+
+ + +
+
@@ -205,6 +156,67 @@ export class LayoutDoc {
+
+ +`, + + html: ` +
+ + +
+ +
+ + +
+
+
+ +
+
+
{{ product.name }}
+ +
+ + + {{ product.category }} + + +
+
+
+ {{ '$' + product.price }} + +
+
+
+
+
+ + +
+
+
+
+ + + {{ product.category }} + + +
+
+ +
{{ product.name }}
+ +
+
+ {{ '$' + product.price }} + +
+
+
+
`, diff --git a/src/app/showcase/doc/dataview/paginationdoc.ts b/src/app/showcase/doc/dataview/paginationdoc.ts index 2b061e1af44..8faaf6aba1c 100644 --- a/src/app/showcase/doc/dataview/paginationdoc.ts +++ b/src/app/showcase/doc/dataview/paginationdoc.ts @@ -11,25 +11,27 @@ import { ProductService } from '../../service/productservice';
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -66,26 +68,29 @@ export class PaginationDoc { } code: Code = { - basic: ` - -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + basic: ` + + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -96,25 +101,27 @@ export class PaginationDoc { html: `
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
diff --git a/src/app/showcase/doc/dataview/primeflexdoc.ts b/src/app/showcase/doc/dataview/primeflexdoc.ts deleted file mode 100644 index bddeab87de4..00000000000 --- a/src/app/showcase/doc/dataview/primeflexdoc.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'primeflex-doc', - template: ` - -

DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.

- - - ` -}) -export class PrimeflexDoc { - code: Code = { - basic: `npm install primeflex` - }; -} diff --git a/src/app/showcase/doc/dataview/sortingdoc.ts b/src/app/showcase/doc/dataview/sortingdoc.ts index 8842a1835cd..eb502f41195 100644 --- a/src/app/showcase/doc/dataview/sortingdoc.ts +++ b/src/app/showcase/doc/dataview/sortingdoc.ts @@ -17,25 +17,27 @@ import { ProductService } from '../../service/productservice';
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -101,25 +103,27 @@ export class SortingDoc {
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
@@ -135,25 +139,27 @@ export class SortingDoc {
- -
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - + +
+
+
+ +
+
+
{{ item.name }}
+ +
+ + + {{ item.category }} + + +
+
+
+ {{ '$' + item.price }} +
-
-
- {{ '$' + product.price }} -
diff --git a/src/app/showcase/doc/table/paginatorbasicdoc.ts b/src/app/showcase/doc/table/paginatorbasicdoc.ts index d0cd4915a11..df443d8c440 100644 --- a/src/app/showcase/doc/table/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/table/paginatorbasicdoc.ts @@ -19,7 +19,7 @@ import { CustomerService } from '../../service/customerservice'; [showCurrentPageReport]="true" [tableStyle]="{ 'min-width': '50rem' }" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" - [rowsPerPageOptions]="[10, 25, 50]" + [rowsPerPageOptions]="[5, 10, 20]" > @@ -68,7 +68,7 @@ export class PaginatorBasicDoc { [showCurrentPageReport]="true" [tableStyle]="{ 'min-width': '50rem' }" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" - [rowsPerPageOptions]="[10, 25, 50]" + [rowsPerPageOptions]="[5, 10, 20]" > @@ -102,7 +102,7 @@ export class PaginatorBasicDoc { [showCurrentPageReport]="true" [tableStyle]="{ 'min-width': '50rem' }" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" - [rowsPerPageOptions]="[10, 25, 50]" + [rowsPerPageOptions]="[5, 10, 20]" > diff --git a/src/app/showcase/doc/tabview/basicdoc.ts b/src/app/showcase/doc/tabview/basicdoc.ts index 1f051f67e8c..0f0ff38a546 100644 --- a/src/app/showcase/doc/tabview/basicdoc.ts +++ b/src/app/showcase/doc/tabview/basicdoc.ts @@ -8,68 +8,31 @@ import { Code } from '../../domain/code';

TabView consists of one or more TabPanel elements.

-
-
-
- - -

{{ tab.content }}

- - -
- -
- - -

{{ tab.content }}

- - -
-
- - -

{{ tab.content }}

- - -
-
-
+ + +

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

+ + +

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

+ + +

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

+ +
` }) export class BasicDoc { - activeIndex: number = 0; - - scrollableTabs: any[]; - - scrollableTabs2: any[]; - - scrollableTabs3: any[]; - - scrollableTabs4: any[]; - - ngOnInit() { - this.scrollableTabs = Array.from({ length: 3 }, (_, i) => ({ - title: 'Title', - content: 'Content' - })); - - this.scrollableTabs2 = Array.from({ length: 5 }, (_, i) => ({ - title: 'Title', - content: 'Content' - })); - - this.scrollableTabs3 = Array.from({ length: 2 }, (_, i) => ({ - title: 'Title', - content: 'Content' - })); - - this.scrollableTabs4 = Array.from({ length: 30 }, (_, i) => ({ - title: 'Title', - content: 'Content' - })); - } code: Code = { basic: ` diff --git a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts deleted file mode 100644 index ddf7b268beb..00000000000 --- a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'accessibility-doc', - template: ` -

Screen Reader

-

- VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized - for accessibility using listProps property. -

-

Keyboard Support

-

Component does not include any built-in interactive elements.

- ` -}) -export class AccessibilityDoc {} diff --git a/src/app/showcase/doc/virtualscroller/basicdoc.ts b/src/app/showcase/doc/virtualscroller/basicdoc.ts deleted file mode 100644 index 47b5166fc04..00000000000 --- a/src/app/showcase/doc/virtualscroller/basicdoc.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; - -interface Item { - label: string; - index: number; -} -@Component({ - selector: 'basic-doc', - template: ` - -

- VirtualScroller requires value as the data to display, itemSize for the dimensions of an item and pTemplate to define the content per item. Size of the viewport is configured using scrollWidth, - scrollHeight properties directly or with CSS width and height styles. -

- -
- - -
- {{ item.label }} -
- - -
- - ` -}) -export class BasicDoc implements OnInit { - items: Item[] = []; - - ngOnInit(): void { - for (let i = 0; i < 10000; i++) { - this.items.push({ label: 'Item #' + i, index: i }); - } - } - - code: Code = { - basic: ` - -
- {{ item.label }} -
- -`, - - html: ` -
- - -
- {{ item.label }} -
- - -
`, - - typescript: ` -import { Component, OnInit } from '@angular/core'; - -interface Item { - label: string; - index: number; -} - -@Component({ - selector: 'virtual-scroller-basic-demo', - templateUrl: './virtual-scroller-basic-demo.html' -}) -export class VirtualScrollerBasicDemo implements OnInit { - items: Item[] = []; - - ngOnInit(): void { - for (let i = 0; i < 10000; i++) { - this.items.push({ label: 'Item #' + i, index: i }); - } - } -}` - }; -} diff --git a/src/app/showcase/doc/virtualscroller/importdoc.ts b/src/app/showcase/doc/virtualscroller/importdoc.ts deleted file mode 100644 index 6634db56867..00000000000 --- a/src/app/showcase/doc/virtualscroller/importdoc.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'import-doc', - template: ` ` -}) -export class ImportDoc { - code: Code = { - typescript: `import { VirtualScrollerModule } from 'primeng/virtualscroller';` - }; -} diff --git a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts b/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts deleted file mode 100644 index 0776bb251a3..00000000000 --- a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts +++ /dev/null @@ -1,242 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { LazyLoadEvent } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - -@Component({ - selector: 'lazy-load-doc', - template: ` - -

- Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded on demand. To implement lazy loading, enable the lazy property and implement onLazyLoad callback to - return data. -

- -
- - List of Products - -
-
- -
-
-
{{ product.name }}
- - -
-
-
{{ '$' + product.price }}
- -
-
- - -
-
-
-
- - -
-
-
- -
-
- - -
- - ` -}) -export class LazyLoadDoc implements OnInit { - products!: Product[]; - - virtualProducts!: Product[]; - - constructor(private productService: ProductService) {} - - ngOnInit(): void { - this.products = Array.from({ length: 10000 }).map(() => this.productService.generatePrduct()); - this.virtualProducts = Array.from({ length: 10000 }); - } - - loadCarsLazy(event: LazyLoadEvent) { - setTimeout(() => { - let loadedProducts = this.products.slice(event.first, event.first + event.rows); - - Array.prototype.splice.apply(this.virtualProducts, [...[event.first, event.rows], ...loadedProducts]); - - event.forceUpdate(); - }, 1000); - } - - getSeverity(status: string) { - switch (status) { - case 'INSTOCK': - return 'success'; - case 'LOWSTOCK': - return 'warning'; - case 'OUTOFSTOCK': - return 'danger'; - } - } - - code: Code = { - basic: ` - List of Products - -
-
- -
-
-
{{ product.name }}
- - -
-
-
{{ '$' + product.price }}
- -
-
- - -
-
-
-
- - -
-
-
- -
-
- -`, - - html: ` -
- - List of Products - -
-
- -
-
-
{{ product.name }}
- - -
-
-
{{ '$' + product.price }}
- -
-
- - -
-
-
-
- - -
-
-
- -
-
- - -
`, - - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { LazyLoadEvent } from 'primeng/api'; -import { Product } from '../../domain/product'; -import { ProductService } from 'src/service/productservice'; - -@Component({ - selector: 'virtual-scroller-lazy-load-demo', - templateUrl: './virtual-scroller-lazy-load-demo.html' -}) -export class VirtualScrollerLazyLoadDemo implements OnInit { - products!: Product[]; - - virtualProducts!: Product[]; - - constructor(private productService: ProductService) {} - - ngOnInit() { - this.productService.getProducts().then((products) => { - this.products = products; - }); - this.virtualProducts = Array.from({ length: 10000 }); - } - - loadCarsLazy(event: LazyLoadEvent) { - setTimeout(() => { - let loadedProducts = this.products.slice(event.first, event.first + event.rows); - - Array.prototype.splice.apply(this.virtualProducts, [...[event.first, event.rows], ...loadedProducts]); - - event.forceUpdate(); - }, 1000); - } - - getSeverity(status: string) { - switch (status) { - case 'INSTOCK': - return 'success'; - case 'LOWSTOCK': - return 'warning'; - case 'OUTOFSTOCK': - return 'danger'; - } - } -}`, - - data: ` -/* ProductService */ -{ - id: '1000', - code: 'f230fh0g3', - name: 'Bamboo Watch', - description: 'Product Description', - image: 'bamboo-watch.jpg', - price: 65, - category: 'Accessories', - quantity: 24, - inventoryStatus: 'INSTOCK', - rating: 5 -}, -...`, - - service: ['ProductService'] - }; - - extFiles = [ - { - path: 'src/domain/product.ts', - content: ` -export interface Product { - id?: string; - code?: string; - name?: string; - description?: string; - price?: number; - quantity?: number; - inventoryStatus?: string; - category?: string; - image?: string; - rating?: number; -}` - } - ]; -} diff --git a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts b/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts deleted file mode 100644 index 34272c6e320..00000000000 --- a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { VirtualScroller } from 'primeng/virtualscroller'; -import { Code } from '../../domain/code'; - -interface Item { - label: string; - index: number; -} -@Component({ - selector: 'programmatic-scroll-doc', - template: ` - -

Scrolling to a specific index can be done with the scrollToIndex function.

- -
- - - -
- {{ item.label }} -
- - -
- - ` -}) -export class ProgrammaticScrollDoc implements OnInit { - @ViewChild('vs') vs!: VirtualScroller; - - items: Item[] = []; - - ngOnInit(): void { - for (let i = 0; i < 10000; i++) { - this.items.push({ label: 'Item #' + i, index: i }); - } - } - - reset() { - this.vs.scrollToIndex(0, 'smooth'); - } - - code: Code = { - basic: ` - - -
- {{ item.label }} -
- -`, - - html: ` -
- - - -
- {{ item.label }} -
- - -
`, - - typescript: ` -import { Component, OnInit, ViewChild } from '@angular/core'; -import { VirtualScroller } from 'primeng/virtualscroller'; - -interface Item { - label: string; - index: number; -} - -@Component({ - selector: 'virtual-scroller-programmatic-scroll-demo', - templateUrl: './virtual-scroller-programmatic-scroll-demo.html' -}) -export class VirtualScrollerProgrammaticScrollDemo implements OnInit { - @ViewChild('vs') vs!: VirtualScroller; - - items: Item[] = []; - - ngOnInit(): void { - for (let i = 0; i < 10000; i++) { - this.items.push({ label: 'Item #' + i, index: i }); - } - } - - reset() { - this.vs.scrollToIndex(0, 'smooth'); - } -}` - }; -} diff --git a/src/app/showcase/doc/virtualscroller/styledoc.ts b/src/app/showcase/doc/virtualscroller/styledoc.ts deleted file mode 100644 index fbd50e48929..00000000000 --- a/src/app/showcase/doc/virtualscroller/styledoc.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'style-doc', - template: ` - -

Following is the list of structural style classes, for theming classes visit theming page.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-virtualscrollerContainer element.
p-virtualscroller-headerHeader section.
p-virtualscroller-footerFooter section.
p-virtualscroller-contentContent section.
p-virtualscroller-listList element.
-
- ` -}) -export class StyleDoc {} diff --git a/src/app/showcase/doc/virtualscroller/templatedoc.ts b/src/app/showcase/doc/virtualscroller/templatedoc.ts deleted file mode 100644 index a139b4830c8..00000000000 --- a/src/app/showcase/doc/virtualscroller/templatedoc.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; - -interface Item { - label: string; - index: number; -} - -@Component({ - selector: 'template-doc', - template: ` - -

Header and Footer are the two sections that are capable of displaying custom content by using header and footer templates.

- -
- - Header Content - -
- {{ item.label }} -
- - Footer Content - -
- - ` -}) -export class TemplateDoc implements OnInit { - items: Item[] = []; - - ngOnInit(): void { - for (let i = 0; i < 10000; i++) { - this.items.push({ label: 'Item #' + i, index: i }); - } - } - - code: Code = { - basic: ` - Header Content - -
- {{ item.label }} -
- - Footer Content -`, - - html: ` -
- - Header Content - -
- {{ item.label }} -
- - Footer Content - -
`, - - typescript: ` -import { Component, OnInit } from '@angular/core'; - -interface Item { - label: string; - index: number; -} - -@Component({ - selector: 'virtual-scroller-template-demo', - templateUrl: './virtual-scroller-template-demo.html' -}) -export class VirtualScrollerTemplateDemo implements OnInit { - items: Item[] = []; - - ngOnInit(): void { - for (let i = 0; i < 10000; i++) { - this.items.push({ label: 'Item #' + i, index: i }); - } - } -}` - }; -} diff --git a/src/app/showcase/doc/virtualscroller/virtualscrollerdoc.module.ts b/src/app/showcase/doc/virtualscroller/virtualscrollerdoc.module.ts deleted file mode 100644 index d74d2fb84be..00000000000 --- a/src/app/showcase/doc/virtualscroller/virtualscrollerdoc.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; -import { VirtualScrollerModule } from 'primeng/virtualscroller'; -import { ImportDoc } from './/importdoc'; -import { BasicDoc } from './basicdoc'; -import { LazyLoadDoc } from './lazyloaddoc'; -import { StyleDoc } from './styledoc'; -import { RouterModule } from '@angular/router'; -import { ProgrammaticScrollDoc } from './programmaticscrolldoc'; -import { ButtonModule } from 'primeng/button'; -import { TemplateDoc } from './templatedoc'; -import { SkeletonModule } from 'primeng/skeleton'; -import { AccessibilityDoc } from './accessibilitydoc'; -import { TagModule } from 'primeng/tag'; - -@NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, VirtualScrollerModule, ButtonModule, SkeletonModule, TagModule], - exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, LazyLoadDoc, StyleDoc, ProgrammaticScrollDoc, TemplateDoc, ProgrammaticScrollDoc, AccessibilityDoc] -}) -export class VirtualScrollerDocModule {} diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index 51fa2cfd897..81d0379a3cc 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -2,7 +2,7 @@ import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router'; +import { ActivatedRoute, NavigationEnd, Router, RouterOutlet} from '@angular/router'; import { PrimeNGConfig } from 'primeng/api'; import { Subscription } from 'rxjs'; import { Theme } from '../domain/theme'; @@ -76,6 +76,16 @@ export class AppComponent implements OnInit, OnDestroy { } + ngAfterViewInit() { + if (isPlatformBrowser(this.platformId)) { + if (window && window && process.env.NODE_ENV === 'production') { + this.injectScripts(); + } + + this.bindRouteEvents(); + } + } + injectScripts() { const script = this.renderer.createElement('script'); script.type = 'text/javascript'; diff --git a/src/app/showcase/layout/app.routes.ts b/src/app/showcase/layout/app.routes.ts index c6d8eb6100f..d4e18fa27e5 100644 --- a/src/app/showcase/layout/app.routes.ts +++ b/src/app/showcase/layout/app.routes.ts @@ -11,6 +11,7 @@ export const routes: Routes = [ { path: '', redirectTo: 'installation', pathMatch: 'full' }, { path: 'installation', loadChildren: () => import('../pages/installation/installation.module').then((m) => m.InstallationModule) }, { path: 'configuration', loadChildren: () => import('../pages/configuration/configurationdemo.module').then((m) => m.ConfigurationDemoModule) }, + { path: 'playground', loadChildren: () => import('../pages/playground/playground.module').then((m) => m.PlaygroundModule) }, { path: 'roadmap', loadChildren: () => import('../pages/roadmap/roadmap.module').then((m) => m.RoadmapModule) }, { path: 'team', loadChildren: () => import('../pages/team/team.module').then((m) => m.TeamModule) }, { path: 'partners', loadChildren: () => import('../pages/partners/partners.module').then((m) => m.PartnersModule) }, @@ -108,7 +109,6 @@ export const routes: Routes = [ { path: 'treeselect', loadChildren: () => import('../pages/treeselect/treeselectdemo.module').then((m) => m.TreeSelectDemoModule) }, { path: 'treetable', loadChildren: () => import('../pages/treetable/treetabledemo.module').then((m) => m.TreeTableDemoModule) }, { path: 'tristatecheckbox', loadChildren: () => import('../pages/tristatecheckbox/tristatecheckboxdemo.module').then((m) => m.TriStateCheckboxDemoModule) }, - { path: 'virtualscroller', loadChildren: () => import('../pages/virtualscroller/virtualscrollerdemo.module').then((m) => m.VirtualScrollerDemoModule) }, { path: 'accessibility', loadChildren: () => import('../pages/accessibility/accessibilitydemo.module').then((m) => m.AccessibilityDemoModule) }, { path: 'scroller', loadChildren: () => import('../pages/scroller/scrollerdemo.module').then((m) => m.ScrollerDemoModule) }, { path: 'uikit', loadChildren: () => import('../pages/uikit/uikit.module').then((m) => m.UIKitModule) }, diff --git a/src/app/showcase/layout/config/app.config.component.ts b/src/app/showcase/layout/config/app.config.component.ts index ac777ff6472..cc664fd77f5 100644 --- a/src/app/showcase/layout/config/app.config.component.ts +++ b/src/app/showcase/layout/config/app.config.component.ts @@ -2,7 +2,7 @@ import { CommonModule, DOCUMENT } from '@angular/common'; import { Component, EventEmitter, Inject, Output, Renderer2 } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; -import { InputSwitchModule, InputSwitchOnChangeEvent } from 'primeng/inputswitch'; +import { InputSwitchModule, InputSwitchChangeEvent } from 'primeng/inputswitch'; import { RadioButtonModule } from 'primeng/radiobutton'; import { SelectButtonChangeEvent, SelectButtonModule } from 'primeng/selectbutton'; import { SidebarModule } from 'primeng/sidebar'; @@ -113,7 +113,7 @@ export class AppConfigComponent { this.configService.setInputStyle(event.value); } - onRippleChange(event: InputSwitchOnChangeEvent) { + onRippleChange(event: InputSwitchChangeEvent) { this.configService.setRipple(event.checked); } diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts index a380380cc78..b78b4151229 100644 --- a/src/app/showcase/layout/doc/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/app.docapitable.component.ts @@ -61,8 +61,8 @@ import { AppConfigService } from '../../service/appconfigservice'; }" *ngIf="entry[0] !== 'name' && entry[0] !== 'type' && entry[0] !== 'parameters'" [id]="id + '.' + entry[0]" - >{{ entry[1] }} + >{{ entry[1] }} + @@ -108,7 +108,7 @@ export class AppDocApiTable { constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, private configService: AppConfigService) {} - isDarkMode(): boolean { + get isDarkMode(): boolean { return this.configService.config.darkMode; } diff --git a/src/app/showcase/layout/doc/app.docsectiontext.component.ts b/src/app/showcase/layout/doc/app.docsectiontext.component.ts index 403f56f21df..639cacc473d 100644 --- a/src/app/showcase/layout/doc/app.docsectiontext.component.ts +++ b/src/app/showcase/layout/doc/app.docsectiontext.component.ts @@ -1,6 +1,5 @@ -import { ChangeDetectorRef, Component, ElementRef, Input } from '@angular/core'; import { Location } from '@angular/common'; -import { Router } from '@angular/router'; +import { Component, ElementRef, Input } from '@angular/core'; @Component({ selector: 'app-docsectiontext', @@ -12,7 +11,7 @@ import { Router } from '@angular/router';

{{ description || null }}

-

+

{{ title }} #

@@ -32,9 +31,9 @@ export class AppDocSectionTextComponent { @Input() description: string; - constructor(public location: Location, private router: Router, public el: ElementRef, public cd: ChangeDetectorRef) {} + constructor(public location: Location, public el: ElementRef) {} - navigate(event, parentClick = false) { + navigate(event) { if (typeof window !== undefined) { const hash = window.location.hash.substring(1); const parentElement = event.currentTarget.parentElement; diff --git a/src/app/showcase/layout/menu/app.menu.component.ts b/src/app/showcase/layout/menu/app.menu.component.ts index 136b0656012..a89d0abb6e7 100644 --- a/src/app/showcase/layout/menu/app.menu.component.ts +++ b/src/app/showcase/layout/menu/app.menu.component.ts @@ -1,9 +1,10 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { Component, ElementRef, Inject, PLATFORM_ID } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { Component, ElementRef, Inject, OnDestroy, PLATFORM_ID } from '@angular/core'; +import { NavigationEnd, Router, RouterModule } from '@angular/router'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { DomHandler } from 'primeng/dom'; import { StyleClassModule } from 'primeng/styleclass'; +import { Subscription } from 'rxjs'; import { default as MenuData } from 'src/assets/showcase/data/menu.json'; import { AppConfigService } from '../../service/appconfigservice'; import { AppMenuItemComponent } from './app.menuitem.component'; @@ -32,10 +33,12 @@ export interface MenuItem { standalone: true, imports: [CommonModule, StyleClassModule, RouterModule, AutoCompleteModule, AppMenuItemComponent] }) -export class AppMenuComponent { +export class AppMenuComponent implements OnDestroy { menu!: MenuItem[]; - constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private el: ElementRef) { + private routerSubscription: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private el: ElementRef, private router: Router) { this.menu = MenuData.data; } @@ -48,6 +51,13 @@ export class AppMenuComponent { setTimeout(() => { this.scrollToActiveItem(); }, 1); + + this.routerSubscription = this.router.events.subscribe((event) => { + if (event instanceof NavigationEnd && this.configService.state.menuActive) { + this.configService.hideMenu(); + DomHandler.unblockBodyScroll('blocked-scroll'); + } + }); } } @@ -64,4 +74,11 @@ export class AppMenuComponent { return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth))); } } + + ngOnDestroy() { + if (this.routerSubscription) { + this.routerSubscription.unsubscribe(); + this.routerSubscription = null; + } + } } diff --git a/src/app/showcase/layout/menu/app.menuitem.component.ts b/src/app/showcase/layout/menu/app.menuitem.component.ts index 405e9340316..44b54ea9245 100644 --- a/src/app/showcase/layout/menu/app.menuitem.component.ts +++ b/src/app/showcase/layout/menu/app.menuitem.component.ts @@ -1,9 +1,8 @@ +import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; import { Router, RouterModule } from '@angular/router'; -import { MenuItem } from './app.menu.component'; -import { CommonModule } from '@angular/common'; -import { AutoCompleteModule } from 'primeng/autocomplete'; import { StyleClassModule } from 'primeng/styleclass'; +import { MenuItem } from './app.menu.component'; @Component({ selector: '[app-menuitem]', @@ -28,7 +27,7 @@ import { StyleClassModule } from 'primeng/styleclass'; {{ item.name }} {{ item.name }} -
+
diff --git a/src/app/showcase/layout/topbar/app.topbar.component.html b/src/app/showcase/layout/topbar/app.topbar.component.html index 7a938d70a1a..c5597dfa15a 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.html +++ b/src/app/showcase/layout/topbar/app.topbar.component.html @@ -12,7 +12,8 @@ - + @@ -31,15 +32,21 @@ - - + + - - - - + + + + @@ -47,7 +54,8 @@ - + @@ -59,22 +67,28 @@ + fill="var(--primary-color-text)" /> + fill="var(--primary-color-text)" /> - - + fill="var(--primary-color-text)" /> + + - - - - + fill="var(--primary-color-text)" /> + + + +
@@ -85,41 +99,45 @@
  • + class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
  • - +
  • + class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
  • -
  • -
  • - -
  • -
    • diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts index c979b6194d3..70213969639 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.ts +++ b/src/app/showcase/layout/topbar/app.topbar.component.ts @@ -3,6 +3,7 @@ import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, OnInit, import { FormsModule } from '@angular/forms'; import { Router, RouterModule } from '@angular/router'; import docsearch from '@docsearch/js'; +import { DomHandler } from 'primeng/dom'; import { StyleClassModule } from 'primeng/styleclass'; import Versions from '../../data/versions.json'; import { AppConfigService } from '../../service/appconfigservice'; @@ -41,8 +42,14 @@ export class AppTopBarComponent implements OnInit, OnDestroy { } } - showMenu() { - this.configService.showMenu(); + toggleMenu() { + if (this.configService.state.menuActive) { + this.configService.hideMenu(); + DomHandler.unblockBodyScroll('blocked-scroll'); + } else { + this.configService.showMenu(); + DomHandler.blockBodyScroll('blocked-scroll'); + } } showConfig() { @@ -58,24 +65,7 @@ export class AppTopBarComponent implements OnInit, OnDestroy { appId: 'XG1L2MUWT9', apiKey: '6057fe1af77fee4e7e41907b0b3ec79d', indexName: 'primeng', - container: '#docsearch', - transformItems: this.handleDocSearchTransformItems.bind(this) - }); - } - - handleDocSearchTransformItems(results) { - const valid = process.env.NODE_ENV !== 'production'; - return results.map((result) => { - if (valid) { - const url = new URL(result.url); - - url.protocol = this.window.location.protocol; - url.hostname = this.window.location.hostname; - url.port = this.window.location.port; - result.url = url.toString(); - } - - return result; + container: '#docsearch' }); } diff --git a/src/app/showcase/pages/accessibility/accessibilitydemo.component.html b/src/app/showcase/pages/accessibility/accessibilitydemo.component.html index b0db89af26f..e507a74659b 100644 --- a/src/app/showcase/pages/accessibility/accessibilitydemo.component.html +++ b/src/app/showcase/pages/accessibility/accessibilitydemo.component.html @@ -1 +1,3 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/showcase/pages/dataview/dataviewdemo.ts b/src/app/showcase/pages/dataview/dataviewdemo.ts index de44faa6346..eacbce447f5 100755 --- a/src/app/showcase/pages/dataview/dataviewdemo.ts +++ b/src/app/showcase/pages/dataview/dataviewdemo.ts @@ -4,7 +4,6 @@ import { BasicDoc } from '../../doc/dataview/basicdoc'; import { ImportDoc } from '../../doc/dataview/importdoc'; import { LayoutDoc } from '../../doc/dataview/layoutdoc'; import { PaginationDoc } from '../../doc/dataview/paginationdoc'; -import { PrimeflexDoc } from '../../doc/dataview/primeflexdoc'; import { SortingDoc } from '../../doc/dataview/sortingdoc'; import { AccessibilityDoc } from '../../doc/dataview/accessibilitydoc'; @@ -19,11 +18,6 @@ export class DataViewDemo { label: 'Import', component: ImportDoc }, - { - id: 'primeflex', - label: 'PrimeFlex', - component: PrimeflexDoc - }, { id: 'basic', label: 'Basic', diff --git a/src/app/showcase/pages/landing/herosection.component.ts b/src/app/showcase/pages/landing/herosection.component.ts index cd3c6061e7b..329404b5839 100644 --- a/src/app/showcase/pages/landing/herosection.component.ts +++ b/src/app/showcase/pages/landing/herosection.component.ts @@ -25,7 +25,7 @@ import { AppConfigService } from '../../service/appconfigservice';
    -

    The Most Complete UI Suite for Angular.js

    +

    The Most Complete UI Suite for Angular

    Elevate your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components. With PrimeNG, turning your development vision into reality has never been easier.

    diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts index 09e87e07eac..124e0da7cfd 100644 --- a/src/app/showcase/pages/landing/landing.component.ts +++ b/src/app/showcase/pages/landing/landing.component.ts @@ -1,8 +1,7 @@ import { CommonModule, DOCUMENT, NgOptimizedImage, isPlatformBrowser } from '@angular/common'; -import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { AfterViewInit, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; -import docsearch from '@docsearch/js'; import { BadgeModule } from 'primeng/badge'; import { ButtonModule } from 'primeng/button'; import { CalendarModule } from 'primeng/calendar'; @@ -64,7 +63,7 @@ import { UsersSectionComponent } from './userssection.component'; FooterSectionComponent ] }) -export class LandingComponent implements OnInit { +export class LandingComponent implements OnInit, AfterViewInit { private window: Window; private tableTheme = 'lara-light-blue'; @@ -85,56 +84,19 @@ export class LandingComponent implements OnInit { return this.configService.state.newsActive; } - constructor( - @Inject(DOCUMENT) private document: Document, - @Inject(PLATFORM_ID) private platformId: any, - private configService: AppConfigService, - private cd: ChangeDetectorRef, - public app: AppComponent, - private metaService: Meta, - private titleService: Title - ) { + constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, public app: AppComponent, private metaService: Meta, private titleService: Title) { this.window = this.document.defaultView as Window; } ngOnInit() { this.titleService.setTitle('PrimeNG - Angular UI Component Library'); this.metaService.updateTag({ name: 'description', content: 'The ultimate collection of design-agnostic, flexible and accessible Angular UI Components.' }); - this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); - - if (isPlatformBrowser(this.platformId)) { - this.initDocSearch(); - } - } - - initDocSearch() { - docsearch({ - appId: 'XG1L2MUWT9', - apiKey: '6057fe1af77fee4e7e41907b0b3ec79d', - indexName: 'primeng', - container: '#docsearch', - transformItems: this.handleDocSearchTransformItems.bind(this) - }); - } - - handleDocSearchTransformItems(results) { - const valid = process.env.NODE_ENV !== 'production'; - return results.map((result) => { - if (valid) { - const url = new URL(result.url); - - url.protocol = this.window.location.protocol; - url.hostname = this.window.location.hostname; - url.port = this.window.location.port; - result.url = url.toString(); - } - - return result; - }); } ngAfterViewInit() { - this.cd.detectChanges(); + if (isPlatformBrowser(this.platformId) && this.configService.config.theme !== this.tableTheme) { + this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); + } } toggleDarkMode() { @@ -146,9 +108,7 @@ export class LandingComponent implements OnInit { } changeTableTheme(value: string) { - if (isPlatformBrowser(this.platformId)) { - this.replaceTableTheme(value); - } + this.replaceTableTheme(value); } replaceTableTheme(newTheme: string) { diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts index 59819aaddf0..7e91d43bc73 100644 --- a/src/app/showcase/pages/landing/themesection.component.ts +++ b/src/app/showcase/pages/landing/themesection.component.ts @@ -34,18 +34,12 @@ import { CustomerService } from '../../service/customerservice'; [value]="customers" [(selection)]="selectedCustomers" dataKey="id" - styleClass="p-datatable-customers" [rowHover]="true" [rows]="5" [showCurrentPageReport]="true" - [rowsPerPageOptions]="[5, 10, 15]" [loading]="loading" - responsiveLayout="scroll" [paginator]="true" - currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']" - paginatorDropdownAppendTo="body" - [totalRecords]="5" >
    diff --git a/src/app/showcase/pages/playground/playground-routing.module.ts b/src/app/showcase/pages/playground/playground-routing.module.ts new file mode 100644 index 00000000000..07369495ae2 --- /dev/null +++ b/src/app/showcase/pages/playground/playground-routing.module.ts @@ -0,0 +1,9 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PlaygroundComponent } from './playground.component'; + +@NgModule({ + imports: [RouterModule.forChild([{ path: '', component: PlaygroundComponent }])], + exports: [RouterModule] +}) +export class PlaygroundRoutingModule {} diff --git a/src/app/showcase/pages/playground/playground.component.html b/src/app/showcase/pages/playground/playground.component.html new file mode 100644 index 00000000000..b1c4c4d5d18 --- /dev/null +++ b/src/app/showcase/pages/playground/playground.component.html @@ -0,0 +1,13 @@ +
    +
    +
    +

    Playground

    +

    Experience PrimeNG right now with the interactive environment.

    +
    +
    + +
    +
    +
    \ No newline at end of file diff --git a/src/app/showcase/pages/playground/playground.component.ts b/src/app/showcase/pages/playground/playground.component.ts new file mode 100644 index 00000000000..a5b9a2063ec --- /dev/null +++ b/src/app/showcase/pages/playground/playground.component.ts @@ -0,0 +1,6 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './playground.component.html' +}) +export class PlaygroundComponent {} diff --git a/src/app/showcase/pages/playground/playground.module.ts b/src/app/showcase/pages/playground/playground.module.ts new file mode 100644 index 00000000000..0421beaec0c --- /dev/null +++ b/src/app/showcase/pages/playground/playground.module.ts @@ -0,0 +1,10 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { PlaygroundRoutingModule } from './playground-routing.module'; +import { PlaygroundComponent } from './playground.component'; + +@NgModule({ + imports: [CommonModule, PlaygroundRoutingModule], + declarations: [PlaygroundComponent] +}) +export class PlaygroundModule {} diff --git a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo-routing.module.ts b/src/app/showcase/pages/virtualscroller/virtualscrollerdemo-routing.module.ts deleted file mode 100755 index edd9c6354eb..00000000000 --- a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo-routing.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { VirtualScrollerDemo } from './virtualscrollerdemo'; - -@NgModule({ - imports: [RouterModule.forChild([{ path: '', component: VirtualScrollerDemo }])], - exports: [RouterModule] -}) -export class VirtualScrollerDemoRoutingModule {} diff --git a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.html b/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.html deleted file mode 100755 index 426702a65b3..00000000000 --- a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.module.ts b/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.module.ts deleted file mode 100755 index 019f5611af5..00000000000 --- a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { VirtualScrollerDocModule } from '../../doc/virtualscroller/virtualscrollerdoc.module'; -import { VirtualScrollerDemo } from './virtualscrollerdemo'; -import { VirtualScrollerDemoRoutingModule } from './virtualscrollerdemo-routing.module'; - -@NgModule({ - imports: [CommonModule, VirtualScrollerDemoRoutingModule, VirtualScrollerDocModule], - declarations: [VirtualScrollerDemo] -}) -export class VirtualScrollerDemoModule {} diff --git a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.scss b/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.scss deleted file mode 100644 index 96a3e27db35..00000000000 --- a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.scss +++ /dev/null @@ -1,76 +0,0 @@ -.product-item { - display: flex; - align-items: center; - padding: 1rem; - width: 100%; - flex-wrap: nowrap; - - img { - width: 100px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - margin-right: 1rem; - } - - .product-list-detail { - flex: 1 1 0; - } - - .product-list-action { - display: flex; - flex-direction: column; - align-items: flex-end; - } - - .product-category-icon { - vertical-align: middle; - margin-right: .5rem; - } - - .product-category { - vertical-align: middle; - line-height: 1; - } - - &.loading-item { - .image-container { - width: 100px; - height: 66px; - animation: pulse 1s infinite ease-in-out; - margin-right: 1rem; - } - - .product-list-detail { - h5, .product-category { - width: 150px; - height: 14px; - display: block; - animation: pulse 1s infinite ease-in-out; - } - } - - .product-list-action { - h6 { - width: 25px; - height: 14px; - animation: pulse 1s infinite ease-in-out; - } - } - } -} - -@media screen and (max-width: 960px) { - .product-item { - h5 { - font-size: 1rem; - } - - img { - width: 50px; - } - - .product-category-icon, - .product-category { - display: none; - } - } -} \ No newline at end of file diff --git a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.ts b/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.ts deleted file mode 100755 index b990284b982..00000000000 --- a/src/app/showcase/pages/virtualscroller/virtualscrollerdemo.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/virtualscroller/basicdoc'; -import { LazyLoadDoc } from '../../doc/virtualscroller/lazyloaddoc'; -import { ImportDoc } from '../../doc/virtualscroller/importdoc'; -import { StyleDoc } from '../../doc/virtualscroller/styledoc'; -import { ProgrammaticScrollDoc } from '../../doc/virtualscroller/programmaticscrolldoc'; -import { TemplateDoc } from '../../doc/virtualscroller/templatedoc'; -import { AccessibilityDoc } from '../../doc/virtualscroller/accessibilitydoc'; - -@Component({ - templateUrl: './virtualscrollerdemo.html', - styleUrls: ['./virtualscrollerdemo.scss'] -}) -export class VirtualScrollerDemo { - docs = [ - { - id: 'import', - label: 'Import', - component: ImportDoc - }, - { - id: 'basic', - label: 'Basic', - component: BasicDoc - }, - { - id: 'template', - label: 'Template', - component: TemplateDoc - }, - { - id: 'lazyload', - label: 'Lazy Load', - component: LazyLoadDoc - }, - { - id: 'programmatic', - label: 'Programmatic Scroll', - component: ProgrammaticScrollDoc - }, - { - id: 'style', - label: 'Style', - component: StyleDoc - }, - { - id: 'accessibility', - label: 'Accessibility', - component: AccessibilityDoc - } - ]; -} diff --git a/src/assets/components/images/line.gif b/src/assets/components/images/line.gif deleted file mode 100755 index 64e2280ec55..00000000000 Binary files a/src/assets/components/images/line.gif and /dev/null differ diff --git a/src/assets/components/images/loading.gif b/src/assets/components/images/loading.gif deleted file mode 100755 index 560eda93105..00000000000 Binary files a/src/assets/components/images/loading.gif and /dev/null differ diff --git a/src/assets/components/images/password-meter.png b/src/assets/components/images/password-meter.png deleted file mode 100755 index 1e1cd729890..00000000000 Binary files a/src/assets/components/images/password-meter.png and /dev/null differ diff --git a/src/assets/fiyu.png b/src/assets/fiyu.png deleted file mode 100644 index 775eeffe88a..00000000000 Binary files a/src/assets/fiyu.png and /dev/null differ diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json index 8db1d0711c0..75229707b2e 100644 --- a/src/assets/showcase/data/menu.json +++ b/src/assets/showcase/data/menu.json @@ -13,8 +13,8 @@ "routerLink": "/configuration" }, { - "name": "Accessibility", - "routerLink": "/accessibility" + "name": "Playground", + "routerLink": "/playground" } ] }, @@ -190,10 +190,6 @@ { "name": "Timeline", "routerLink": "/timeline" - }, - { - "name": "VirtualScroller", - "routerLink": "/virtualscroller" } ] }, @@ -299,7 +295,6 @@ "name": "Menu", "routerLink": "/menu" }, - { "name": "Menubar", "routerLink": "/menubar" @@ -519,6 +514,11 @@ "icon": "pi pi-table", "href": "https://primeflex.org" }, + { + "name": "Accessibility", + "icon": "pi pi-users", + "routerLink": "/accessibility" + }, { "name": "Support", "icon": "pi pi-question", @@ -589,4 +589,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/src/assets/showcase/styles/layout/landing/themes/lara-dark-blue/theme.css b/src/assets/showcase/styles/layout/landing/themes/lara-dark-blue/theme.css index 34cd15ec696..7c2394f4cf1 100644 --- a/src/assets/showcase/styles/layout/landing/themes/lara-dark-blue/theme.css +++ b/src/assets/showcase/styles/layout/landing/themes/lara-dark-blue/theme.css @@ -1,262 +1,38 @@ -.landing-themes * { - box-sizing: border-box; -} -.landing-themes .box.table-container { - background-color: #071426; -} .landing-themes .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } -.landing-themes .p-component-overlay { - background-color: rgba(0, 0, 0, 0.4); - transition-duration: 0.2s; -} -.landing-themes .p-disabled, .landing-themes .p-component:disabled { - opacity: 0.4; -} -.landing-themes .p-error { - color: #FCA5A5; -} + .landing-themes .p-text-secondary { color: rgba(255, 255, 255, 0.6); } .landing-themes .pi { font-size: 1rem; } +.landing-themes .p-icon { + width: 1rem; + height: 1rem; +} .landing-themes .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 6px; } -.landing-themes .p-link:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-component-overlay-enter { - animation: p-component-overlay-enter-animation 150ms forwards; -} -.landing-themes .p-component-overlay-leave { - animation: p-component-overlay-leave-animation 150ms forwards; -} -@keyframes p-component-overlay-enter-animation { - from { - background-color: transparent; - } - to { - background-color: var(--maskbg); - } -} -@keyframes p-component-overlay-leave-animation { - from { - background-color: var(--maskbg); - } - to { - background-color: transparent; - } -} -.landing-themes .p-calendar.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; -} -.landing-themes .p-datepicker { - padding: 0.5rem; - background: #071426; - color: rgba(255, 255, 255, 0.87); - border: 1px solid #0b213f; - border-radius: 6px; -} -.landing-themes .p-datepicker:not(.p-datepicker-inline) { - background: #071426; - border: 1px solid #0b213f; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); -} -.landing-themes .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { - background: #071426; -} -.landing-themes .p-datepicker .p-datepicker-header { - padding: 0.5rem; - color: rgba(255, 255, 255, 0.87); - background: #071426; - font-weight: 700; - margin: 0; - border-bottom: 1px solid #0b213f; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev, -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next { - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:focus, -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title { - line-height: 2rem; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - border-color: #93C5FD; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { - margin-right: 0.5rem; -} -.landing-themes .p-datepicker table { - font-size: 1rem; - margin: 0.5rem 0; -} -.landing-themes .p-datepicker table th { - padding: 0.5rem; -} -.landing-themes .p-datepicker table th > span { - width: 2.5rem; - height: 2.5rem; -} -.landing-themes .p-datepicker table td { - padding: 0.5rem; -} -.landing-themes .p-datepicker table td > span { - width: 2.5rem; - height: 2.5rem; - border-radius: 50%; - transition: box-shadow 0.2s; - border: 1px solid transparent; -} -.landing-themes .p-datepicker table td > span.p-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); -} -.landing-themes .p-datepicker table td > span:focus { +.landing-themes .p-link:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-datepicker table td.p-datepicker-today > span { - background: transparent; - color: #93C5FD; - border-color: transparent; -} -.landing-themes .p-datepicker table td.p-datepicker-today > span.p-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); -} -.landing-themes .p-datepicker .p-datepicker-buttonbar { - padding: 1rem 0; - border-top: 1px solid #0b213f; -} -.landing-themes .p-datepicker .p-datepicker-buttonbar .p-button { - width: auto; -} -.landing-themes .p-datepicker .p-timepicker { - border-top: 1px solid #0b213f; - padding: 0.5rem; -} -.landing-themes .p-datepicker .p-timepicker button { - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-datepicker .p-timepicker button:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-datepicker .p-timepicker button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-datepicker .p-timepicker button:last-child { - margin-top: 0.2em; -} -.landing-themes .p-datepicker .p-timepicker span { - font-size: 1.25rem; -} -.landing-themes .p-datepicker .p-timepicker > div { - padding: 0 0.5rem; -} -.landing-themes .p-datepicker.p-datepicker-timeonly .p-timepicker { - border-top: 0 none; -} -.landing-themes .p-datepicker .p-monthpicker { - margin: 0.5rem 0; -} -.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month { - padding: 0.5rem; - transition: box-shadow 0.2s; - border-radius: 6px; -} -.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); -} -.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-right: 1px solid #0b213f; - padding-right: 0.5rem; - padding-left: 0.5rem; - padding-top: 0; - padding-bottom: 0; -} -.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { - padding-left: 0; -} -.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { - padding-right: 0; - border-right: 0 none; -} -.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover { - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -@media screen and (max-width: 769px) { - .landing-themes .p-datepicker table th, .landing-themes .p-datepicker table td { - padding: 0; - } + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } .landing-themes .p-checkbox { width: 22px; height: 22px; } .landing-themes .p-checkbox .p-checkbox-box { - border: 2px solid #0b213f; - background: #040d19; + border: 2px solid #424b57; + background: #111827; width: 22px; height: 22px; color: rgba(255, 255, 255, 0.87); @@ -265,189 +41,71 @@ } .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: #1c2127; + color: #030712; font-size: 14px; } -.landing-themes .p-checkbox .p-checkbox-box.p-highlight { - border-color: #93C5FD; - background: #93C5FD; +.landing-themes .p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; } -.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { - border-color: #6cb0fc; - background: #6cb0fc; - color: #1c2127; +.landing-themes .p-checkbox .p-checkbox-box.p-highlight { + border-color: #60a5fa; + background: #60a5fa; } .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #93C5FD; + border-color: #60a5fa; } .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - border-color: #93C5FD; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; } .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #6cb0fc; - background: #6cb0fc; - color: #1c2127; + border-color: #bfdbfe; + background: #bfdbfe; + color: #030712; } -.landing-themes .p-checkbox.p-invalid > .p-checkbox-box { +.landing-themes p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #FCA5A5; } .landing-themes .p-input-filled .p-checkbox .p-checkbox-box { - background-color: #0b213f; + background-color: #424b57; } .landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { - background: #93C5FD; + background: #60a5fa; } .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: #0b213f; + background-color: #424b57; } .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - background: #6cb0fc; + background: #bfdbfe; } -.landing-themes .p-dropdown { - background: #040d19; - border: 1px solid #0b213f; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; -} -.landing-themes .p-dropdown:not(.p-disabled):hover { - border-color: #93C5FD; -} -.landing-themes .p-dropdown:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - border-color: #93C5FD; -} -.landing-themes .p-dropdown.p-dropdown-clearable .p-dropdown-label { - padding-right: 1.75rem; -} -.landing-themes .p-dropdown .p-dropdown-label { - background: transparent; - border: 0 none; -} -.landing-themes .p-dropdown .p-dropdown-label.p-placeholder { - color: rgba(255, 255, 255, 0.6); -} -.landing-themes .p-dropdown .p-dropdown-label:enabled:focus { - outline: 0 none; - box-shadow: none; -} -.landing-themes .p-dropdown .p-dropdown-trigger { - background: transparent; - color: rgba(255, 255, 255, 0.6); - width: 3rem; - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} -.landing-themes .p-dropdown .p-dropdown-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; -} -.landing-themes .p-dropdown.p-invalid.p-component { - border-color: #FCA5A5; -} -.landing-themes .p-dropdown-panel { - background: #071426; - color: rgba(255, 255, 255, 0.87); - border: 1px solid #0b213f; - border-radius: 6px; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); -} -.landing-themes .p-dropdown-panel .p-dropdown-header { - padding: 0.75rem 1.25rem; - border-bottom: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - background: #071426; - margin: 0; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter { - padding-right: 1.75rem; - margin-right: -1.75rem; -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; -} -.landing-themes .p-dropdown-panel .p-dropdown-items { - padding: 0.75rem 0; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item { - margin: 0; - padding: 0.75rem 1.25rem; - border: 0 none; - color: rgba(255, 255, 255, 0.87); - background: transparent; - transition: box-shadow 0.2s; - border-radius: 0; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { - margin: 0; - padding: 0.75rem 1.25rem; - color: rgba(255, 255, 255, 0.87); - background: #091a32; - font-weight: 700; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; - color: rgba(255, 255, 255, 0.87); - background: transparent; -} -.landing-themes .p-input-filled .p-dropdown { - background: #0b213f; -} -.landing-themes .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #0b213f; -} -.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #0b213f; -} -.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; -} -.landing-themes .p-inputnumber.p-invalid.p-component > .p-inputtext { - border-color: #FCA5A5; +.landing-themes .p-checkbox-label { + margin-left: 0.5rem; } .landing-themes .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; color: rgba(255, 255, 255, 0.87); - background: #040d19; + background: #111827; padding: 0.75rem 0.75rem; - border: 1px solid #0b213f; + border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; } .landing-themes .p-inputtext:enabled:hover { - border-color: #93C5FD; + border-color: #60a5fa; } .landing-themes .p-inputtext:enabled:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - border-color: #93C5FD; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + border-color: #60a5fa; } -.landing-themes .p-inputtext.p-invalid.p-component { +.landing-themes .p-inputtext.ng-dirty.ng-invalid { border-color: #FCA5A5; } .landing-themes .p-inputtext.p-inputtext-sm { @@ -463,12 +121,11 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } -.landing-themes .p-float-label > label.p-error { +.landing-themes .p-float-label > .ng-invalid.ng-dirty + label { color: #FCA5A5; } -.landing-themes .p-input-icon-left > i:first-of-type, -.landing-themes .p-input-icon-left > svg:first-of-type, -.landing-themes .p-input-icon-left > .p-input-prefix { +.landing-themes .p-input-icon-left > .p-icon-wrapper.p-icon, +.landing-themes .p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } @@ -478,9 +135,8 @@ .landing-themes .p-input-icon-left.p-float-label > label { left: 2.5rem; } -.landing-themes .p-input-icon-right > i:last-of-type, -.landing-themes .p-input-icon-right > svg:last-of-type, -.landing-themes .p-input-icon-right > .p-input-suffix { +.landing-themes .p-input-icon-right > .p-icon-wrapper, +.landing-themes .p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } @@ -500,13 +156,13 @@ color: rgba(255, 255, 255, 0.6); } .landing-themes .p-input-filled .p-inputtext { - background-color: #0b213f; + background-color: #424b57; } .landing-themes .p-input-filled .p-inputtext:enabled:hover { - background-color: #0b213f; + background-color: #424b57; } .landing-themes .p-input-filled .p-inputtext:enabled:focus { - background-color: #0b213f; + background-color: #424b57; } .landing-themes .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -516,328 +172,85 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } -.landing-themes .p-multiselect { - background: #040d19; - border: 1px solid #0b213f; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; -} -.landing-themes .p-multiselect:not(.p-disabled):hover { - border-color: #93C5FD; -} -.landing-themes .p-multiselect:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - border-color: #93C5FD; -} -.landing-themes .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; -} -.landing-themes .p-multiselect .p-multiselect-label { - padding: 0.75rem 0.75rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-multiselect .p-multiselect-label.p-placeholder { - color: rgba(255, 255, 255, 0.6); -} -.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token { - padding: 0.375rem 0.75rem; - margin-right: 0.5rem; - background: rgba(147, 197, 253, 0.16); - color: rgba(255, 255, 255, 0.87); - border-radius: 6px; -} -.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { - margin-left: 0.5rem; -} -.landing-themes .p-multiselect .p-multiselect-trigger { - background: transparent; - color: rgba(255, 255, 255, 0.6); - width: 3rem; - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} -.landing-themes .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; -} -.landing-themes .p-multiselect.p-invalid.p-component { - border-color: #FCA5A5; -} -.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { - padding: 0.375rem 0.75rem; -} -.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; -} -.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; -} -.landing-themes .p-multiselect-panel { - background: #071426; - color: rgba(255, 255, 255, 0.87); - border: 1px solid #0b213f; - border-radius: 6px; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); -} -.landing-themes .p-multiselect-panel .p-multiselect-header { - padding: 0.75rem 1.25rem; - border-bottom: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - background: #071426; - margin: 0; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { - padding-right: 1.75rem; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close { - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-multiselect-panel .p-multiselect-items { - padding: 0.75rem 0; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item { - margin: 0; - padding: 0.75rem 1.25rem; - border: 0 none; - color: rgba(255, 255, 255, 0.87); - background: transparent; - transition: box-shadow 0.2s; - border-radius: 0; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { - margin-right: 0.5rem; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { - margin: 0; - padding: 0.75rem 1.25rem; - color: rgba(255, 255, 255, 0.87); - background: #091a32; - font-weight: 700; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { - padding: 0.75rem 1.25rem; - color: rgba(255, 255, 255, 0.87); - background: transparent; -} -.landing-themes .p-input-filled .p-multiselect { - background: #0b213f; -} -.landing-themes .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #0b213f; -} -.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #0b213f; -} -.landing-themes .p-radiobutton { - width: 22px; - height: 22px; -} -.landing-themes .p-radiobutton .p-radiobutton-box { - border: 2px solid #0b213f; - background: #040d19; - width: 22px; - height: 22px; - 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; -} -.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #93C5FD; -} -.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); - border-color: #93C5FD; -} -.landing-themes .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - width: 12px; - height: 12px; - transition-duration: 0.2s; - background-color: #1c2127; -} -.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight { - border-color: #93C5FD; - background: #93C5FD; -} -.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - border-color: #6cb0fc; - background: #6cb0fc; - color: #1c2127; -} -.landing-themes .p-radiobutton.p-invalid > .p-radiobutton-box { - border-color: #FCA5A5; -} -.landing-themes .p-radiobutton:focus { - outline: 0 none; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: #0b213f; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: #0b213f; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { - background: #93C5FD; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #6cb0fc; -} -.landing-themes .p-slider { - background: #0b213f; - border: 0 none; - border-radius: 6px; -} -.landing-themes .p-slider.p-slider-horizontal { - height: 0.286rem; -} -.landing-themes .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.5715rem; - margin-left: -0.5715rem; -} -.landing-themes .p-slider.p-slider-vertical { - width: 0.286rem; -} -.landing-themes .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.5715rem; - margin-bottom: -0.5715rem; -} -.landing-themes .p-slider .p-slider-handle { - height: 1.143rem; - width: 1.143rem; - background: #0b213f; - border: 2px solid #93C5FD; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-slider .p-slider-handle:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-slider .p-slider-range { - background: #93C5FD; -} -.landing-themes .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #93C5FD; - border-color: #93C5FD; -} .landing-themes .p-button { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; + color: #030712; + background: #60a5fa; + border: 1px solid #60a5fa; padding: 0.75rem 1.25rem; font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; } -.landing-themes .p-button:enabled:hover, .landing-themes .p-button:not(button):not(a):not(.p-disabled):hover { - background: #7fbafd; - color: #1c2127; - border-color: #7fbafd; +.landing-themes .p-button:enabled:hover { + background: #93c5fd; + color: #030712; + border-color: #93c5fd; } -.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; +.landing-themes .p-button:enabled:active { + background: #bfdbfe; + color: #030712; + border-color: #bfdbfe; } .landing-themes .p-button.p-button-outlined { background-color: transparent; - color: #93C5FD; + color: #60a5fa; border: 1px solid; } -.landing-themes .p-button.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(165, 180, 252, 0.04); - color: #93C5FD; +.landing-themes .p-button.p-button-outlined:enabled:hover { + background: rgba(96, 165, 250, 0.04); + color: #60a5fa; border: 1px solid; } -.landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; +.landing-themes .p-button.p-button-outlined:enabled:active { + background: rgba(96, 165, 250, 0.16); + color: #60a5fa; border: 1px solid; } .landing-themes .p-button.p-button-outlined.p-button-plain { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } -.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } -.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } .landing-themes .p-button.p-button-text { background-color: transparent; - color: #93C5FD; + color: #60a5fa; border-color: transparent; } -.landing-themes .p-button.p-button-text:enabled:hover, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(165, 180, 252, 0.04); - color: #93C5FD; +.landing-themes .p-button.p-button-text:enabled:hover { + background: rgba(96, 165, 250, 0.04); + color: #60a5fa; border-color: transparent; } -.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; +.landing-themes .p-button.p-button-text:enabled:active { + background: rgba(96, 165, 250, 0.16); + color: #60a5fa; border-color: transparent; } .landing-themes .p-button.p-button-text.p-button-plain { color: rgba(255, 255, 255, 0.6); } -.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.6); } -.landing-themes .p-button.p-button-text.p-button-plain:enabled:active, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-text.p-button-plain:enabled:active { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); } .landing-themes .p-button:focus { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); +} +.landing-themes .p-button .p-button-label { + transition-duration: 0.2s; } .landing-themes .p-button .p-button-icon-left { margin-right: 0.5rem; @@ -856,8 +269,8 @@ min-width: 1rem; height: 1rem; line-height: 1rem; - color: #93C5FD; - background-color: #1c2127; + color: #60a5fa; + background-color: #030712; } .landing-themes .p-button.p-button-raised { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -891,20 +304,11 @@ .landing-themes .p-button.p-button-lg .p-button-icon { font-size: 1.25rem; } -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { +.landing-themes .p-button.p-button-loading-label-only .p-button-label { margin-left: 0.5rem; } -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { - margin-right: 0.5rem; -} -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { - margin-top: 0.5rem; -} -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { - margin-bottom: 0.5rem; -} .landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon { - margin: 0; + margin-right: 0; } .landing-themes .p-fluid .p-button { width: 100%; @@ -918,337 +322,337 @@ .landing-themes .p-fluid .p-buttonset .p-button { flex: 1; } -.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary { - color: #1c2127; - background: #CBD5E1; - border: 1px solid #CBD5E1; +.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button { + color: #020617; + background: #94a3b8; + border: 1px solid #94a3b8; } -.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { - background: #b0bfd1; - color: #1c2127; - border-color: #b0bfd1; +.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover { + background: #cbd5e1; + color: #020617; + border-color: #cbd5e1; } -.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { - box-shadow: 0 0 0 1px #dbe2ea; +.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + box-shadow: 0 0 0 1px #b4bfcd; } -.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { - background: #95a9c2; - color: #1c2127; - border-color: #95a9c2; +.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active { + background: #e2e8f0; + color: #020617; + border-color: #e2e8f0; } -.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined { +.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border: 1px solid; } -.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); - color: #CBD5E1; +.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { + background: rgba(148, 163, 184, 0.04); + color: #94a3b8; border: 1px solid; } -.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); - color: #CBD5E1; +.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + background: rgba(148, 163, 184, 0.16); + color: #94a3b8; border: 1px solid; } -.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text { +.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; - color: #CBD5E1; + color: #94a3b8; border-color: transparent; } -.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(203, 213, 225, 0.04); +.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { + background: rgba(148, 163, 184, 0.04); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } -.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(203, 213, 225, 0.16); +.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { + background: rgba(148, 163, 184, 0.16); border-color: transparent; - color: #CBD5E1; + color: #94a3b8; } -.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info { - color: #1c2127; - background: #93C5FD; - border: 1px solid #93C5FD; +.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button { + color: #082f49; + background: #38bdf8; + border: 1px solid #38bdf8; } -.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { - background: #6cb0fc; - color: #1c2127; - border-color: #6cb0fc; +.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover { + background: #7dd3fc; + color: #082f49; + border-color: #7dd3fc; } -.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { - box-shadow: 0 0 0 1px #b3d6fe; +.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus { + box-shadow: 0 0 0 1px #74d1fa; } -.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { - background: #449bfc; - color: #1c2127; - border-color: #449bfc; +.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active { + background: #bae6fd; + color: #082f49; + border-color: #bae6fd; } -.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined { +.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border: 1px solid; } -.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); - color: #93C5FD; +.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + background: rgba(56, 189, 248, 0.04); + color: #38bdf8; border: 1px solid; } -.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); - color: #93C5FD; +.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + background: rgba(56, 189, 248, 0.16); + color: #38bdf8; border: 1px solid; } -.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text { +.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; - color: #93C5FD; + color: #38bdf8; border-color: transparent; } -.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(147, 197, 253, 0.04); +.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + background: rgba(56, 189, 248, 0.04); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } -.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(147, 197, 253, 0.16); +.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + background: rgba(56, 189, 248, 0.16); border-color: transparent; - color: #93C5FD; + color: #38bdf8; } -.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success { - color: #1c2127; - background: #86EFAC; - border: 1px solid #86EFAC; +.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button { + color: #052e16; + background: #4ade80; + border: 1px solid #4ade80; } -.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { - background: #65eb95; - color: #1c2127; - border-color: #65eb95; +.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover { + background: #86efac; + color: #052e16; + border-color: #86efac; } -.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { - box-shadow: 0 0 0 1px #aaf4c5; +.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus { + box-shadow: 0 0 0 1px #80e8a6; } -.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { - background: #44e67f; - color: #1c2127; - border-color: #44e67f; +.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active { + background: #bbf7d0; + color: #052e16; + border-color: #bbf7d0; } -.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined { +.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; - color: #86EFAC; + color: #4ade80; border: 1px solid; } -.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); - color: #86EFAC; +.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { + background: rgba(74, 222, 128, 0.04); + color: #4ade80; border: 1px solid; } -.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); - color: #86EFAC; +.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + background: rgba(74, 222, 128, 0.16); + color: #4ade80; border: 1px solid; } -.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text { +.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; - color: #86EFAC; + color: #4ade80; border-color: transparent; } -.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(134, 239, 172, 0.04); +.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { + background: rgba(74, 222, 128, 0.04); border-color: transparent; - color: #86EFAC; + color: #4ade80; } -.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(134, 239, 172, 0.16); +.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { + background: rgba(74, 222, 128, 0.16); border-color: transparent; - color: #86EFAC; + color: #4ade80; } -.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning { - color: #1c2127; - background: #FCD34D; - border: 1px solid #FCD34D; +.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button { + color: #431407; + background: #fb923c; + border: 1px solid #fb923c; } -.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { - background: #fbcb2d; - color: #1c2127; - border-color: #fbcb2d; +.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover { + background: #fdba74; + color: #431407; + border-color: #fdba74; } -.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { - box-shadow: 0 0 0 1px #fde082; +.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus { + box-shadow: 0 0 0 1px #fcb377; } -.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { - background: #fbc30c; - color: #1c2127; - border-color: #fbc30c; +.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active { + background: #fed7aa; + color: #431407; + border-color: #fed7aa; } -.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined { +.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; - color: #FCD34D; + color: #fb923c; border: 1px solid; } -.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); - color: #FCD34D; +.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + background: rgba(251, 146, 60, 0.04); + color: #fb923c; border: 1px solid; } -.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); - color: #FCD34D; +.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + background: rgba(251, 146, 60, 0.16); + color: #fb923c; border: 1px solid; } -.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text { +.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; - color: #FCD34D; + color: #fb923c; border-color: transparent; } -.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 211, 77, 0.04); +.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + background: rgba(251, 146, 60, 0.04); border-color: transparent; - color: #FCD34D; + color: #fb923c; } -.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 211, 77, 0.16); +.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + background: rgba(251, 146, 60, 0.16); border-color: transparent; - color: #FCD34D; + color: #fb923c; } -.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help { - color: #1c2127; - background: #D8B4FE; - border: 1px solid #D8B4FE; +.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button { + color: #3b0764; + background: #c084fc; + border: 1px solid #c084fc; } -.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { - background: #c289fd; - color: #1c2127; - border-color: #c289fd; +.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover { + background: #d8b4fe; + color: #3b0764; + border-color: #d8b4fe; } -.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { - box-shadow: 0 0 0 1px #e4cbfe; +.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus { + box-shadow: 0 0 0 1px #d3a9fd; } -.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { - background: #ab5efd; - color: #1c2127; - border-color: #ab5efd; +.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active { + background: #e9d5ff; + color: #3b0764; + border-color: #e9d5ff; } -.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined { +.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border: 1px solid; } -.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); - color: #D8B4FE; +.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { + background: rgba(192, 132, 252, 0.04); + color: #c084fc; border: 1px solid; } -.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); - color: #D8B4FE; +.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + background: rgba(192, 132, 252, 0.16); + color: #c084fc; border: 1px solid; } -.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text { +.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; - color: #D8B4FE; + color: #c084fc; border-color: transparent; } -.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(216, 180, 254, 0.04); +.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { + background: rgba(192, 132, 252, 0.04); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } -.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(216, 180, 254, 0.16); +.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { + background: rgba(192, 132, 252, 0.16); border-color: transparent; - color: #D8B4FE; + color: #c084fc; } -.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger { - color: #1c2127; - background: #FCA5A5; - border: 1px solid #FCA5A5; +.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button { + color: #450a0a; + background: #f87171; + border: 1px solid #f87171; } -.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { - background: #fb7d7d; - color: #1c2127; - border-color: #fb7d7d; +.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover { + background: #fca5a5; + color: #450a0a; + border-color: #fca5a5; } -.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { - box-shadow: 0 0 0 1px #fdc0c0; +.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus { + box-shadow: 0 0 0 1px #fa9c9c; } -.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { - background: #f95454; - color: #1c2127; - border-color: #f95454; +.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active { + background: #fecaca; + color: #450a0a; + border-color: #fecaca; } -.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined { +.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; - color: #FCA5A5; + color: #f87171; border: 1px solid; } -.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); - color: #FCA5A5; +.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { + background: rgba(248, 113, 113, 0.04); + color: #f87171; border: 1px solid; } -.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); - color: #FCA5A5; +.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + background: rgba(248, 113, 113, 0.16); + color: #f87171; border: 1px solid; } -.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text { +.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; - color: #FCA5A5; + color: #f87171; border-color: transparent; } -.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(252, 165, 165, 0.04); +.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { + background: rgba(248, 113, 113, 0.04); border-color: transparent; - color: #FCA5A5; + color: #f87171; } -.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(252, 165, 165, 0.16); +.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { + background: rgba(248, 113, 113, 0.16); border-color: transparent; - color: #FCA5A5; + color: #f87171; } .landing-themes .p-button.p-button-link { - color: #93C5FD; + color: #60a5fa; background: transparent; border: transparent; } -.landing-themes .p-button.p-button-link:enabled:hover, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-link:enabled:hover { background: transparent; - color: #93C5FD; + color: #60a5fa; border-color: transparent; } -.landing-themes .p-button.p-button-link:enabled:hover .p-button-label, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { +.landing-themes .p-button.p-button-link:enabled:hover .p-button-label { text-decoration: underline; } -.landing-themes .p-button.p-button-link:enabled:focus, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-link:enabled:focus { background: transparent; - box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.5); + box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2); border-color: transparent; } -.landing-themes .p-button.p-button-link:enabled:active, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-link:enabled:active { background: transparent; - color: #93C5FD; + color: #60a5fa; border-color: transparent; } .landing-themes .p-datatable .p-paginator-top { - border-width: 1px 0 1px 0; + border-width: 0; border-radius: 0; } .landing-themes .p-datatable .p-paginator-bottom { - border-width: 0 0 1px 0; + border-width: 0; border-radius: 0; } .landing-themes .p-datatable .p-datatable-header { - background: #071426; + background: #1f2937; color: rgba(255, 255, 255, 0.6); - border: 1px solid #0b213f; + border: 1px solid #424b57; border-width: 0 0 1px 0; padding: 1rem 1rem; font-weight: 700; } .landing-themes .p-datatable .p-datatable-footer { - background: #071426; + background: #1f2937; color: rgba(255, 255, 255, 0.87); - border: 1px solid #0b213f; + border: 1px solid #424b57; border-width: 0 0 1px 0; padding: 1rem 1rem; font-weight: 700; @@ -1256,21 +660,21 @@ .landing-themes .p-datatable .p-datatable-thead > tr > th { text-align: left; padding: 1rem 1rem; - border: 1px solid #0b213f; + border: 1px solid #424b57; border-width: 0 0 1px 0; font-weight: 700; color: rgba(255, 255, 255, 0.87); - background: #071426; + background: #1f2937; transition: box-shadow 0.2s; } .landing-themes .p-datatable .p-datatable-tfoot > tr > td { text-align: left; padding: 1rem 1rem; - border: 1px solid #0b213f; + border: 1px solid #424b57; border-width: 0 0 1px 0; font-weight: 700; color: rgba(255, 255, 255, 0.87); - background: #071426; + background: #1f2937; } .landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon { color: rgba(255, 255, 255, 0.6); @@ -1282,42 +686,42 @@ min-width: 1.143rem; line-height: 1.143rem; color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); + background: rgba(96, 165, 250, 0.16); margin-left: 0.5rem; } -.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { +.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } -.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { +.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { color: rgba(255, 255, 255, 0.87); } .landing-themes .p-datatable .p-sortable-column.p-highlight { - background: rgba(147, 197, 253, 0.16); + background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); } .landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { color: rgba(255, 255, 255, 0.87); } -.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { - background: rgba(147, 197, 253, 0.16); +.landing-themes .p-datatable .p-sortable-column.p-highlight:hover { + background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); } -.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { +.landing-themes .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { color: rgba(255, 255, 255, 0.87); } -.landing-themes .p-datatable .p-sortable-column:focus { - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); +.landing-themes .p-datatable .p-sortable-column:focus-visible { + box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2); outline: 0 none; } .landing-themes .p-datatable .p-datatable-tbody > tr { - background: #071426; + background: #1f2937; color: rgba(255, 255, 255, 0.87); transition: box-shadow 0.2s; } .landing-themes .p-datatable .p-datatable-tbody > tr > td { text-align: left; - border: 1px solid #0b213f; + border: 1px solid #424b57; border-width: 0 0 1px 0; padding: 1rem 1rem; } @@ -1341,64 +745,46 @@ border-color: transparent; background: rgba(255, 255, 255, 0.03); } -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { margin-right: 0.5rem; } -.landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title { - font-weight: 700; -} -.landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight { - background: rgba(147, 197, 253, 0.16); - color: rgba(255, 255, 255, 0.87); +.landing-themes .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid rgba(96, 165, 250, 0.2); + outline-offset: -0.15rem; } .landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight { - background: rgba(147, 197, 253, 0.16); + background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); } .landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 rgba(147, 197, 253, 0.16); + box-shadow: inset 0 2px 0 0 rgba(96, 165, 250, 0.16); } .landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 rgba(147, 197, 253, 0.16); -} -.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); -} -.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { - outline: 0.15rem solid rgba(147, 197, 253, 0.5); - outline-offset: -0.15rem; -} -.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); -} -.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { - outline: 0.15rem solid rgba(147, 197, 253, 0.5); - outline-offset: -0.15rem; + box-shadow: inset 0 -2px 0 0 rgba(96, 165, 250, 0.16); } -.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { +.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); } .landing-themes .p-datatable .p-column-resizer-helper { - background: #93C5FD; + background: #60a5fa; } .landing-themes .p-datatable .p-datatable-scrollable-header, .landing-themes .p-datatable .p-datatable-scrollable-footer { - background: #071426; + background: #1f2937; } .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, -.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot { - background-color: #071426; +.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #1f2937; } .landing-themes .p-datatable .p-datatable-loading-icon { font-size: 2rem; @@ -1416,29 +802,59 @@ border-width: 0 1px 1px 1px; } .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { - background: rgba(255, 255, 255, 0.01); +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { - background: rgba(147, 197, 253, 0.16); - color: rgba(255, 255, 255, 0.87); +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; +} +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { + background: #1c2532; +} +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { + background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler { color: rgba(255, 255, 255, 0.87); } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { - background: rgba(255, 255, 255, 0.01); +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover { + color: rgba(255, 255, 255, 0.87); } .landing-themes .p-datatable.p-datatable-sm .p-datatable-header { padding: 0.5rem 0.5rem; @@ -1470,129 +886,11 @@ .landing-themes .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } -.landing-themes .p-datatable-drag-selection-helper { - background: rgba(147, 197, 253, 0.16); -} -.landing-themes .p-column-filter-row .p-column-filter-menu-button, -.landing-themes .p-column-filter-row .p-column-filter-clear-button { - margin-left: 0.5rem; -} -.landing-themes .p-column-filter-menu-button { - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-column-filter-menu-button:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { - background: rgba(255, 255, 255, 0.03); - color: rgba(255, 255, 255, 0.87); -} -.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: rgba(147, 197, 253, 0.16); - color: rgba(255, 255, 255, 0.87); -} -.landing-themes .p-column-filter-menu-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-column-filter-clear-button { - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-column-filter-clear-button:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-column-filter-clear-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-column-filter-overlay { - background: #071426; - color: rgba(255, 255, 255, 0.87); - border: 1px solid #0b213f; - border-radius: 6px; - box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); - min-width: 12.5rem; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items { - padding: 0.75rem 0; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { - margin: 0; - padding: 0.75rem 1.25rem; - border: 0 none; - color: rgba(255, 255, 255, 0.87); - background: transparent; - transition: box-shadow 0.2s; - border-radius: 0; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { - color: rgba(255, 255, 255, 0.87); - background: rgba(147, 197, 253, 0.16); -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { - color: rgba(255, 255, 255, 0.87); - background: rgba(255, 255, 255, 0.03); -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid #0b213f; - margin: 0.25rem 0; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-operator { - padding: 0.75rem 1.25rem; - border-bottom: 1px solid #0b213f; - color: rgba(255, 255, 255, 0.87); - background: #071426; - margin: 0; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint { - padding: 1.25rem; - border-bottom: 1px solid #0b213f; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { - margin-bottom: 0.5rem; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { - margin-top: 0.5rem; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint:last-child { - border-bottom: 0 none; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-add-rule { - padding: 0.75rem 1.25rem; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-buttonbar { - padding: 1.25rem; -} .landing-themes .p-paginator { - background: #071426; + background: #1f2937; color: rgba(255, 255, 255, 0.6); - border: solid #0b213f; - border-width: 1px; + border: solid #424b57; + border-width: 0; padding: 0.5rem 1rem; border-radius: 6px; } @@ -1627,6 +925,7 @@ } .landing-themes .p-paginator .p-dropdown { margin-left: 0.5rem; + margin-right: 0.5rem; height: 3rem; } .landing-themes .p-paginator .p-dropdown .p-dropdown-label { @@ -1659,8 +958,8 @@ border-radius: 6px; } .landing-themes .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: rgba(147, 197, 253, 0.16); - border-color: rgba(147, 197, 253, 0.16); + background: rgba(96, 165, 250, 0.16); + border-color: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); } .landing-themes .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { @@ -1668,55 +967,50 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } - -.landing-themes .p-button-label { +.landing-themes .p-tag { + background: #60a5fa; + color: #030712; + font-size: 0.75rem; font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; } -.landing-themes .p-accordion .p-accordion-header .p-accordion-header-link { - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-tabview .p-tabview-nav li .p-tabview-nav-link { - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #93C5FD; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); -} -.landing-themes .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: #93C5FD; -} -.landing-themes .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: #93C5FD; -} -.landing-themes .p-button:focus { - box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(165, 180, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +.landing-themes .p-tag.p-tag-success { + background-color: #4ade80; + color: #052e16; } -.landing-themes .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(203, 213, 225, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +.landing-themes .p-tag.p-tag-info { + background-color: #38bdf8; + color: #082f49; } -.landing-themes .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(134, 239, 172, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +.landing-themes .p-tag.p-tag-warning { + background-color: #fb923c; + color: #431407; } -.landing-themes .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(147, 197, 253, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +.landing-themes .p-tag.p-tag-danger { + background-color: #f87171; + color: #450a0a; } -.landing-themes .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(252, 211, 77, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +.landing-themes .p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; } -.landing-themes .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(216, 180, 254, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +.landing-themes .p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; } -.landing-themes .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(252, 165, 165, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); +.landing-themes .p-progressbar { + border: 0 none; + height: 1.5rem; + background: #424b57; + border-radius: 6px; } -.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #93C5FD; +.landing-themes .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #60a5fa; } -.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #93C5FD; +.landing-themes .p-progressbar .p-progressbar-label { + color: #030712; + line-height: 1.5rem; } diff --git a/src/assets/showcase/styles/layout/landing/themes/lara-light-blue/theme.css b/src/assets/showcase/styles/layout/landing/themes/lara-light-blue/theme.css index 2c586f320b5..d84487291dc 100644 --- a/src/assets/showcase/styles/layout/landing/themes/lara-light-blue/theme.css +++ b/src/assets/showcase/styles/layout/landing/themes/lara-light-blue/theme.css @@ -1,262 +1,40 @@ -.landing-themes * { - box-sizing: border-box; -} .landing-themes .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } -.landing-themes .p-component-overlay { - background-color: rgba(0, 0, 0, 0.4); - transition-duration: 0.2s; -} -.landing-themes .p-disabled, .landing-themes .p-component:disabled { - opacity: 0.6; -} -.landing-themes .p-error { - color: #e24c4c; -} .landing-themes .p-text-secondary { - color: #6c757d; + color: #6b7280; } .landing-themes .pi { font-size: 1rem; } +.landing-themes .p-icon { + width: 1rem; + height: 1rem; +} .landing-themes .p-link { + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - border-radius: 6px; -} -.landing-themes .p-link:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-component-overlay-enter { - animation: p-component-overlay-enter-animation 150ms forwards; -} -.landing-themes .p-component-overlay-leave { - animation: p-component-overlay-leave-animation 150ms forwards; -} -@keyframes p-component-overlay-enter-animation { - from { - background-color: transparent; - } - to { - background-color: var(--maskbg); - } -} -@keyframes p-component-overlay-leave-animation { - from { - background-color: var(--maskbg); - } - to { - background-color: transparent; - } -} -.landing-themes .p-calendar.p-invalid.p-component > .p-inputtext { - border-color: #e24c4c; -} -.landing-themes .p-datepicker { - padding: 0.5rem; - background: #ffffff; - color: #495057; - border: 1px solid #ced4da; border-radius: 6px; } -.landing-themes .p-datepicker:not(.p-datepicker-inline) { - background: #ffffff; - border: 0 none; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); -} -.landing-themes .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { - background: #ffffff; -} -.landing-themes .p-datepicker .p-datepicker-header { - padding: 0.5rem; - color: #495057; - background: #ffffff; - font-weight: 600; - margin: 0; - border-bottom: 1px solid #dee2e6; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev, -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next { - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:focus, -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title { - line-height: 2rem; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select { - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - border-color: #3B82F6; -} -.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { - margin-right: 0.5rem; -} -.landing-themes .p-datepicker table { - font-size: 1rem; - margin: 0.5rem 0; -} -.landing-themes .p-datepicker table th { - padding: 0.5rem; -} -.landing-themes .p-datepicker table th > span { - width: 2.5rem; - height: 2.5rem; -} -.landing-themes .p-datepicker table td { - padding: 0.5rem; -} -.landing-themes .p-datepicker table td > span { - width: 2.5rem; - height: 2.5rem; - border-radius: 50%; - transition: box-shadow 0.2s; - border: 1px solid transparent; -} -.landing-themes .p-datepicker table td > span.p-highlight { - color: #1D4ED8; - background: #EFF6FF; -} -.landing-themes .p-datepicker table td > span:focus { +.landing-themes .p-link:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } -.landing-themes .p-datepicker table td.p-datepicker-today > span { - background: #ced4da; - color: #495057; - border-color: transparent; -} -.landing-themes .p-datepicker table td.p-datepicker-today > span.p-highlight { - color: #1D4ED8; - background: #EFF6FF; -} -.landing-themes .p-datepicker .p-datepicker-buttonbar { - padding: 1rem 0; - border-top: 1px solid #dee2e6; -} -.landing-themes .p-datepicker .p-datepicker-buttonbar .p-button { - width: auto; -} -.landing-themes .p-datepicker .p-timepicker { - border-top: 1px solid #dee2e6; - padding: 0.5rem; -} -.landing-themes .p-datepicker .p-timepicker button { - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-datepicker .p-timepicker button:enabled:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; -} -.landing-themes .p-datepicker .p-timepicker button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-datepicker .p-timepicker button:last-child { - margin-top: 0.2em; -} -.landing-themes .p-datepicker .p-timepicker span { - font-size: 1.25rem; -} -.landing-themes .p-datepicker .p-timepicker > div { - padding: 0 0.5rem; -} -.landing-themes .p-datepicker.p-datepicker-timeonly .p-timepicker { - border-top: 0 none; -} -.landing-themes .p-datepicker .p-monthpicker { - margin: 0.5rem 0; -} -.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month { - padding: 0.5rem; - transition: box-shadow 0.2s; - border-radius: 6px; -} -.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { - color: #1D4ED8; - background: #EFF6FF; -} -.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-right: 1px solid #dee2e6; - padding-right: 0.5rem; - padding-left: 0.5rem; - padding-top: 0; - padding-bottom: 0; -} -.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { - padding-left: 0; -} -.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { - padding-right: 0; - border-right: 0 none; -} -.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { - background: #e9ecef; -} -.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover { - background: #e9ecef; -} -.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -@media screen and (max-width: 769px) { - .landing-themes .p-datepicker table th, .landing-themes .p-datepicker table td { - padding: 0; - } -} .landing-themes .p-checkbox { width: 22px; height: 22px; } .landing-themes .p-checkbox .p-checkbox-box { - border: 2px solid #ced4da; + border: 2px solid #d1d5db; background: #ffffff; width: 22px; height: 22px; - color: #495057; + color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } @@ -265,15 +43,14 @@ color: #ffffff; font-size: 14px; } +.landing-themes .p-checkbox .p-checkbox-box .p-icon { + width: 14px; + height: 14px; +} .landing-themes .p-checkbox .p-checkbox-box.p-highlight { border-color: #3B82F6; background: #3B82F6; } -.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { - border-color: #1D4ED8; - background: #1D4ED8; - color: #ffffff; -} .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { border-color: #3B82F6; } @@ -288,149 +65,32 @@ background: #1D4ED8; color: #ffffff; } -.landing-themes .p-checkbox.p-invalid > .p-checkbox-box { +.landing-themes p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } .landing-themes .p-input-filled .p-checkbox .p-checkbox-box { - background-color: #e9ecef; + background-color: #f3f4f6; } .landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #3B82F6; } .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: #e9ecef; + background-color: #f3f4f6; } .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1D4ED8; } -.landing-themes .p-dropdown { - background: #ffffff; - border: 1px solid #ced4da; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; -} -.landing-themes .p-dropdown:not(.p-disabled):hover { - border-color: #3B82F6; -} -.landing-themes .p-dropdown:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - border-color: #3B82F6; -} -.landing-themes .p-dropdown.p-dropdown-clearable .p-dropdown-label { - padding-right: 1.75rem; -} -.landing-themes .p-dropdown .p-dropdown-label { - background: transparent; - border: 0 none; -} -.landing-themes .p-dropdown .p-dropdown-label.p-placeholder { - color: #6c757d; -} -.landing-themes .p-dropdown .p-dropdown-label:enabled:focus { - outline: 0 none; - box-shadow: none; -} -.landing-themes .p-dropdown .p-dropdown-trigger { - background: transparent; - color: #6c757d; - width: 3rem; - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} -.landing-themes .p-dropdown .p-dropdown-clear-icon { - color: #6c757d; - right: 3rem; -} -.landing-themes .p-dropdown.p-invalid.p-component { - border-color: #e24c4c; -} -.landing-themes .p-dropdown-panel { - background: #ffffff; - color: #495057; - border: 0 none; - border-radius: 6px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); -} -.landing-themes .p-dropdown-panel .p-dropdown-header { - padding: 0.75rem 1.25rem; - border-bottom: 1px solid #dee2e6; - color: #343a40; - background: #f8f9fa; - margin: 0; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter { - padding-right: 1.75rem; - margin-right: -1.75rem; -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { - right: 0.75rem; - color: #6c757d; -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; -} -.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; -} -.landing-themes .p-dropdown-panel .p-dropdown-items { - padding: 0.75rem 0; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item { - margin: 0; - padding: 0.75rem 1.25rem; - border: 0 none; - color: #495057; - background: transparent; - transition: box-shadow 0.2s; - border-radius: 0; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { - color: #1D4ED8; - background: #EFF6FF; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { - color: #495057; - background: #e9ecef; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { - margin: 0; - padding: 0.75rem 1.25rem; - color: #343a40; - background: #ffffff; - font-weight: 700; -} -.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message { - padding: 0.75rem 1.25rem; - color: #495057; - background: transparent; -} -.landing-themes .p-input-filled .p-dropdown { - background: #e9ecef; -} -.landing-themes .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #e9ecef; -} -.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; -} -.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; -} -.landing-themes .p-inputnumber.p-invalid.p-component > .p-inputtext { - border-color: #e24c4c; +.landing-themes .p-checkbox-label { + margin-left: 0.5rem; } .landing-themes .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: var(--font-family); + font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; - color: #495057; + color: #4b5563; background: #ffffff; padding: 0.75rem 0.75rem; - border: 1px solid #ced4da; + border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; @@ -444,7 +104,7 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; border-color: #3B82F6; } -.landing-themes .p-inputtext.p-invalid.p-component { +.landing-themes .p-inputtext.ng-dirty.ng-invalid { border-color: #e24c4c; } .landing-themes .p-inputtext.p-inputtext-sm { @@ -457,17 +117,16 @@ } .landing-themes .p-float-label > label { left: 0.75rem; - color: #6c757d; + color: #6b7280; transition-duration: 0.2s; } -.landing-themes .p-float-label > label.p-error { +.landing-themes .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } -.landing-themes .p-input-icon-left > i:first-of-type, -.landing-themes .p-input-icon-left > svg:first-of-type, -.landing-themes .p-input-icon-left > .p-input-prefix { +.landing-themes .p-input-icon-left > .p-icon-wrapper.p-icon, +.landing-themes .p-input-icon-left > i:first-of-type { left: 0.75rem; - color: #6c757d; + color: #6b7280; } .landing-themes .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; @@ -475,32 +134,31 @@ .landing-themes .p-input-icon-left.p-float-label > label { left: 2.5rem; } -.landing-themes .p-input-icon-right > i:last-of-type, -.landing-themes .p-input-icon-right > svg:last-of-type, -.landing-themes .p-input-icon-right > .p-input-suffix { +.landing-themes .p-input-icon-right > .p-icon-wrapper, +.landing-themes .p-input-icon-right > i:last-of-type { right: 0.75rem; - color: #6c757d; + color: #6b7280; } .landing-themes .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } .landing-themes ::-webkit-input-placeholder { - color: #6c757d; + color: #6b7280; } .landing-themes :-moz-placeholder { - color: #6c757d; + color: #6b7280; } .landing-themes ::-moz-placeholder { - color: #6c757d; + color: #6b7280; } .landing-themes :-ms-input-placeholder { - color: #6c757d; + color: #6b7280; } .landing-themes .p-input-filled .p-inputtext { - background-color: #e9ecef; + background-color: #f3f4f6; } .landing-themes .p-input-filled .p-inputtext:enabled:hover { - background-color: #e9ecef; + background-color: #f3f4f6; } .landing-themes .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; @@ -513,252 +171,6 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } -.landing-themes .p-multiselect { - background: #ffffff; - border: 1px solid #ced4da; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 6px; -} -.landing-themes .p-multiselect:not(.p-disabled):hover { - border-color: #3B82F6; -} -.landing-themes .p-multiselect:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; - border-color: #3B82F6; -} -.landing-themes .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; -} -.landing-themes .p-multiselect .p-multiselect-label { - padding: 0.75rem 0.75rem; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-multiselect .p-multiselect-label.p-placeholder { - color: #6c757d; -} -.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token { - padding: 0.375rem 0.75rem; - margin-right: 0.5rem; - background: #EFF6FF; - color: #1D4ED8; - border-radius: 6px; -} -.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { - margin-left: 0.5rem; -} -.landing-themes .p-multiselect .p-multiselect-trigger { - background: transparent; - color: #6c757d; - width: 3rem; - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} -.landing-themes .p-multiselect .p-multiselect-clear-icon { - color: #6c757d; - right: 3rem; -} -.landing-themes .p-multiselect.p-invalid.p-component { - border-color: #e24c4c; -} -.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { - padding: 0.375rem 0.75rem; -} -.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; -} -.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; -} -.landing-themes .p-multiselect-panel { - background: #ffffff; - color: #495057; - border: 0 none; - border-radius: 6px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); -} -.landing-themes .p-multiselect-panel .p-multiselect-header { - padding: 0.75rem 1.25rem; - border-bottom: 1px solid #dee2e6; - color: #343a40; - background: #f8f9fa; - margin: 0; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { - padding-right: 1.75rem; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon { - right: 0.75rem; - color: #6c757d; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close { - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; -} -.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-multiselect-panel .p-multiselect-items { - padding: 0.75rem 0; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item { - margin: 0; - padding: 0.75rem 1.25rem; - border: 0 none; - color: #495057; - background: transparent; - transition: box-shadow 0.2s; - border-radius: 0; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { - color: #1D4ED8; - background: #EFF6FF; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { - color: #495057; - background: #e9ecef; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { - margin-right: 0.5rem; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group { - margin: 0; - padding: 0.75rem 1.25rem; - color: #343a40; - background: #ffffff; - font-weight: 700; -} -.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message { - padding: 0.75rem 1.25rem; - color: #495057; - background: transparent; -} -.landing-themes .p-input-filled .p-multiselect { - background: #e9ecef; -} -.landing-themes .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #e9ecef; -} -.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; -} -.landing-themes .p-radiobutton { - width: 22px; - height: 22px; -} -.landing-themes .p-radiobutton .p-radiobutton-box { - border: 2px solid #ced4da; - background: #ffffff; - width: 22px; - height: 22px; - color: #495057; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #3B82F6; -} -.landing-themes .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; -} -.landing-themes .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - width: 12px; - height: 12px; - transition-duration: 0.2s; - background-color: #ffffff; -} -.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight { - border-color: #3B82F6; - background: #3B82F6; -} -.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - border-color: #1D4ED8; - background: #1D4ED8; - color: #ffffff; -} -.landing-themes .p-radiobutton.p-invalid > .p-radiobutton-box { - border-color: #e24c4c; -} -.landing-themes .p-radiobutton:focus { - outline: 0 none; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: #e9ecef; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: #e9ecef; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { - background: #3B82F6; -} -.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { - background: #1D4ED8; -} -.landing-themes .p-slider { - background: #dee2e6; - border: 0 none; - border-radius: 6px; -} -.landing-themes .p-slider.p-slider-horizontal { - height: 0.286rem; -} -.landing-themes .p-slider.p-slider-horizontal .p-slider-handle { - margin-top: -0.5715rem; - margin-left: -0.5715rem; -} -.landing-themes .p-slider.p-slider-vertical { - width: 0.286rem; -} -.landing-themes .p-slider.p-slider-vertical .p-slider-handle { - margin-left: -0.5715rem; - margin-bottom: -0.5715rem; -} -.landing-themes .p-slider .p-slider-handle { - height: 1.143rem; - width: 1.143rem; - background: #ffffff; - border: 2px solid #3B82F6; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-slider .p-slider-handle:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-slider .p-slider-range { - background: #3B82F6; -} -.landing-themes .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #3B82F6; - border-color: #3B82F6; -} .landing-themes .p-button { color: #ffffff; background: #3B82F6; @@ -768,12 +180,12 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; } -.landing-themes .p-button:enabled:hover, .landing-themes .p-button:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button:enabled:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } -.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button:enabled:active { background: #1D4ED8; color: #ffffff; border-color: #1D4ED8; @@ -783,59 +195,62 @@ color: #3B82F6; border: 1px solid; } -.landing-themes .p-button.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(99, 102, 241, 0.04); +.landing-themes .p-button.p-button-outlined:enabled:hover { + background: rgba(59, 130, 246, 0.04); color: #3B82F6; border: 1px solid; } -.landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(99, 102, 241, 0.16); +.landing-themes .p-button.p-button-outlined:enabled:active { + background: rgba(59, 130, 246, 0.16); color: #3B82F6; border: 1px solid; } .landing-themes .p-button.p-button-outlined.p-button-plain { - color: #6c757d; - border-color: #6c757d; + color: #6b7280; + border-color: #6b7280; } -.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; +.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover { + background: #f3f4f6; + color: #6b7280; } -.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active { - background: #dee2e6; - color: #6c757d; +.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active { + background: #e5e7eb; + color: #6b7280; } .landing-themes .p-button.p-button-text { background-color: transparent; color: #3B82F6; border-color: transparent; } -.landing-themes .p-button.p-button-text:enabled:hover, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(99, 102, 241, 0.04); +.landing-themes .p-button.p-button-text:enabled:hover { + background: rgba(59, 130, 246, 0.04); color: #3B82F6; border-color: transparent; } -.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(99, 102, 241, 0.16); +.landing-themes .p-button.p-button-text:enabled:active { + background: rgba(59, 130, 246, 0.16); color: #3B82F6; border-color: transparent; } .landing-themes .p-button.p-button-text.p-button-plain { - color: #6c757d; + color: #6b7280; } -.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover { - background: #e9ecef; - color: #6c757d; +.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover { + background: #f3f4f6; + color: #6b7280; } -.landing-themes .p-button.p-button-text.p-button-plain:enabled:active, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active { - background: #dee2e6; - color: #6c757d; +.landing-themes .p-button.p-button-text.p-button-plain:enabled:active { + background: #e5e7eb; + color: #6b7280; } .landing-themes .p-button:focus { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } +.landing-themes .p-button .p-button-label { + transition-duration: 0.2s; +} .landing-themes .p-button .p-button-icon-left { margin-right: 0.5rem; } @@ -888,20 +303,11 @@ .landing-themes .p-button.p-button-lg .p-button-icon { font-size: 1.25rem; } -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label { +.landing-themes .p-button.p-button-loading-label-only .p-button-label { margin-left: 0.5rem; } -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label { - margin-right: 0.5rem; -} -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label { - margin-top: 0.5rem; -} -.landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label { - margin-bottom: 0.5rem; -} .landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon { - margin: 0; + margin-right: 0; } .landing-themes .p-fluid .p-button { width: 100%; @@ -915,290 +321,290 @@ .landing-themes .p-fluid .p-buttonset .p-button { flex: 1; } -.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary { +.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748B; border: 1px solid #64748B; } -.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover { background: #475569; color: #ffffff; border-color: #475569; } -.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #E2E8F0; } -.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: #334155; color: #ffffff; border-color: #334155; } -.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined { +.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748B; border: 1px solid; } -.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover { background: rgba(100, 116, 139, 0.04); color: #64748B; border: 1px solid; } -.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(100, 116, 139, 0.16); color: #64748B; border: 1px solid; } -.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text { +.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748B; border-color: transparent; } -.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748B; } -.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748B; } -.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info { +.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button { color: #ffffff; - background: #3B82F6; - border: 1px solid #3B82F6; + background: #0ea5e9; + border: 1px solid #0ea5e9; } -.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover { - background: #2563EB; +.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover { + background: #0284c7; color: #ffffff; - border-color: #2563EB; + border-color: #0284c7; } -.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #BFDBFE; } -.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active { - background: #1D4ED8; +.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active { + background: #0369a1; color: #ffffff; - border-color: #1D4ED8; + border-color: #0369a1; } -.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined { +.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border: 1px solid; } -.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); - color: #3B82F6; +.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover { + background: rgba(14, 165, 233, 0.04); + color: #0ea5e9; border: 1px solid; } -.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); - color: #3B82F6; +.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + background: rgba(14, 165, 233, 0.16); + color: #0ea5e9; border: 1px solid; } -.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text { +.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; - color: #3B82F6; + color: #0ea5e9; border-color: transparent; } -.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(59, 130, 246, 0.04); +.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover { + background: rgba(14, 165, 233, 0.04); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } -.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(59, 130, 246, 0.16); +.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active { + background: rgba(14, 165, 233, 0.16); border-color: transparent; - color: #3B82F6; + color: #0ea5e9; } -.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success { +.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22C55E; border: 1px solid #22C55E; } -.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover { background: #16A34A; color: #ffffff; border-color: #16A34A; } -.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #BBF7D0; } -.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active { background: #15803D; color: #ffffff; border-color: #15803D; } -.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined { +.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22C55E; border: 1px solid; } -.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover { background: rgba(34, 197, 94, 0.04); color: #22C55E; border: 1px solid; } -.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(34, 197, 94, 0.16); color: #22C55E; border: 1px solid; } -.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text { +.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22C55E; border-color: transparent; } -.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22C55E; } -.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22C55E; } -.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning { +.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button { color: #ffffff; - background: #F59E0B; - border: 1px solid #F59E0B; + background: #f97316; + border: 1px solid #f97316; } -.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover { - background: #D97706; +.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover { + background: #ea580c; color: #ffffff; - border-color: #D97706; + border-color: #ea580c; } -.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #FDE68A; } -.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active { - background: #B45309; +.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active { + background: #c2410c; color: #ffffff; - border-color: #B45309; + border-color: #c2410c; } -.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined { +.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; - color: #F59E0B; + color: #f97316; border: 1px solid; } -.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); - color: #F59E0B; +.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover { + background: rgba(249, 115, 22, 0.04); + color: #f97316; border: 1px solid; } -.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); - color: #F59E0B; +.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + background: rgba(249, 115, 22, 0.16); + color: #f97316; border: 1px solid; } -.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text { +.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; - color: #F59E0B; + color: #f97316; border-color: transparent; } -.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover { - background: rgba(245, 158, 11, 0.04); +.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover { + background: rgba(249, 115, 22, 0.04); border-color: transparent; - color: #F59E0B; + color: #f97316; } -.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active { - background: rgba(245, 158, 11, 0.16); +.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active { + background: rgba(249, 115, 22, 0.16); border-color: transparent; - color: #F59E0B; + color: #f97316; } -.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help { +.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #A855F7; border: 1px solid #A855F7; } -.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover { background: #9333EA; color: #ffffff; border-color: #9333EA; } -.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #E9D5FF; } -.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active { background: #7E22CE; color: #ffffff; border-color: #7E22CE; } -.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined { +.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #A855F7; border: 1px solid; } -.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover { background: rgba(168, 85, 247, 0.04); color: #A855F7; border: 1px solid; } -.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(168, 85, 247, 0.16); color: #A855F7; border: 1px solid; } -.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text { +.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #A855F7; border-color: transparent; } -.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #A855F7; } -.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #A855F7; } -.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger { +.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #EF4444; border: 1px solid #EF4444; } -.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover { background: #DC2626; color: #ffffff; border-color: #DC2626; } -.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus { box-shadow: 0 0 0 0.2rem #FECACA; } -.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active { background: #B91C1C; color: #ffffff; border-color: #B91C1C; } -.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined { +.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #EF4444; border: 1px solid; } -.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover { background: rgba(239, 68, 68, 0.04); color: #EF4444; border: 1px solid; } -.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(239, 68, 68, 0.16); color: #EF4444; border: 1px solid; } -.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text { +.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #EF4444; border-color: transparent; } -.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #EF4444; } -.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #EF4444; @@ -1208,44 +614,44 @@ background: transparent; border: transparent; } -.landing-themes .p-button.p-button-link:enabled:hover, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover { +.landing-themes .p-button.p-button-link:enabled:hover { background: transparent; color: #1D4ED8; border-color: transparent; } -.landing-themes .p-button.p-button-link:enabled:hover .p-button-label, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label { +.landing-themes .p-button.p-button-link:enabled:hover .p-button-label { text-decoration: underline; } -.landing-themes .p-button.p-button-link:enabled:focus, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus { +.landing-themes .p-button.p-button-link:enabled:focus { background: transparent; box-shadow: 0 0 0 0.2rem #BFDBFE; border-color: transparent; } -.landing-themes .p-button.p-button-link:enabled:active, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):active { +.landing-themes .p-button.p-button-link:enabled:active { background: transparent; color: #1D4ED8; border-color: transparent; } .landing-themes .p-datatable .p-paginator-top { - border-width: 0 0 1px 0; + border-width: 0 0 0 0; border-radius: 0; } .landing-themes .p-datatable .p-paginator-bottom { - border-width: 0 0 1px 0; + border-width: 0 0 0 0; border-radius: 0; } .landing-themes .p-datatable .p-datatable-header { - background: #f8f9fa; - color: #343a40; - border: 1px solid #dee2e6; + background: #f9fafb; + color: #374151; + border: 1px solid #e5e7eb; border-width: 1px 0 1px 0; padding: 1rem 1rem; font-weight: 700; } .landing-themes .p-datatable .p-datatable-footer { - background: #f8f9fa; - color: #343a40; - border: 1px solid #dee2e6; + background: #f9fafb; + color: #374151; + border: 1px solid #e5e7eb; border-width: 0 0 1px 0; padding: 1rem 1rem; font-weight: 700; @@ -1253,24 +659,24 @@ .landing-themes .p-datatable .p-datatable-thead > tr > th { text-align: left; padding: 1rem 1rem; - border: 1px solid #dee2e6; + border: 1px solid #e5e7eb; border-width: 0 0 1px 0; font-weight: 700; - color: #343a40; - background: #f8f9fa; + color: #374151; + background: #f9fafb; transition: box-shadow 0.2s; } .landing-themes .p-datatable .p-datatable-tfoot > tr > td { text-align: left; padding: 1rem 1rem; - border: 1px solid #dee2e6; + border: 1px solid #e5e7eb; border-width: 0 0 1px 0; font-weight: 700; - color: #343a40; - background: #f8f9fa; + color: #374151; + background: #f9fafb; } .landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon { - color: #343a40; + color: #374151; margin-left: 0.5rem; } .landing-themes .p-datatable .p-sortable-column .p-sortable-column-badge { @@ -1282,12 +688,12 @@ background: #EFF6FF; margin-left: 0.5rem; } -.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { - background: #e9ecef; - color: #343a40; +.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):hover { + background: #f3f4f6; + color: #374151; } -.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon { - color: #343a40; +.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { + color: #374151; } .landing-themes .p-datatable .p-sortable-column.p-highlight { background: #EFF6FF; @@ -1296,25 +702,25 @@ .landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { color: #1D4ED8; } -.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover { +.landing-themes .p-datatable .p-sortable-column.p-highlight:hover { background: #EFF6FF; color: #1D4ED8; } -.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon { +.landing-themes .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { color: #1D4ED8; } -.landing-themes .p-datatable .p-sortable-column:focus { +.landing-themes .p-datatable .p-sortable-column:focus-visible { box-shadow: inset 0 0 0 0.15rem #BFDBFE; outline: 0 none; } .landing-themes .p-datatable .p-datatable-tbody > tr { background: #ffffff; - color: #495057; + color: #4b5563; transition: box-shadow 0.2s; } .landing-themes .p-datatable .p-datatable-tbody > tr > td { text-align: left; - border: 1px solid #dee2e6; + border: 1px solid #e5e7eb; border-width: 0 0 1px 0; padding: 1rem 1rem; } @@ -1324,7 +730,7 @@ .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: #6c757d; + color: #6b7280; border: 0 none; background: transparent; border-radius: 50%; @@ -1334,14 +740,14 @@ .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { - color: #343a40; + color: #374151; border-color: transparent; - background: #e9ecef; + background: #f3f4f6; } -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus, -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus, -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus, -.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus { +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -1349,12 +755,9 @@ .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { margin-right: 0.5rem; } -.landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title { - font-weight: 700; -} -.landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight { - background: #EFF6FF; - color: #1D4ED8; +.landing-themes .p-datatable .p-datatable-tbody > tr:focus-visible { + outline: 0.15rem solid #BFDBFE; + outline-offset: -0.15rem; } .landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight { background: #EFF6FF; @@ -1366,36 +769,21 @@ .landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #EFF6FF; } -.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { - background: #e9ecef; - color: #495057; -} -.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus { - outline: 0.15rem solid #BFDBFE; - outline-offset: -0.15rem; -} -.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover { - background: #e9ecef; - color: #495057; -} -.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus { - outline: 0.15rem solid #BFDBFE; - outline-offset: -0.15rem; -} -.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { - background: #e9ecef; - color: #495057; +.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { + background: #f3f4f6; + color: #4b5563; } .landing-themes .p-datatable .p-column-resizer-helper { background: #3B82F6; } .landing-themes .p-datatable .p-datatable-scrollable-header, .landing-themes .p-datatable .p-datatable-scrollable-footer { - background: #f8f9fa; + background: #f9fafb; } .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, -.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot { - background-color: #f8f9fa; +.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { + background-color: #f9fafb; } .landing-themes .p-datatable .p-datatable-loading-icon { font-size: 2rem; @@ -1413,30 +801,60 @@ border-width: 0 1px 1px 1px; } .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 1px 1px 1px; + border-width: 1px 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; } .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + border-width: 1px 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { border-width: 1px; } .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td { - border-width: 1px; + border-width: 1px 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { - background: #fcfcfc; +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { +.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} +.landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; +} +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { + background: #f8f8fa; +} +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { background: #EFF6FF; color: #1D4ED8; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler { color: #1D4ED8; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { +.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover { color: #1D4ED8; } -.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { - background: #fcfcfc; -} .landing-themes .p-datatable.p-datatable-sm .p-datatable-header { padding: 0.5rem 0.5rem; } @@ -1467,128 +885,10 @@ .landing-themes .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } -.landing-themes .p-datatable-drag-selection-helper { - background: rgba(99, 102, 241, 0.16); -} -.landing-themes .p-column-filter-row .p-column-filter-menu-button, -.landing-themes .p-column-filter-row .p-column-filter-clear-button { - margin-left: 0.5rem; -} -.landing-themes .p-column-filter-menu-button { - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-column-filter-menu-button:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; -} -.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open:hover { - background: #e9ecef; - color: #343a40; -} -.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: #EFF6FF; - color: #1D4ED8; -} -.landing-themes .p-column-filter-menu-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-column-filter-clear-button { - width: 2rem; - height: 2rem; - color: #6c757d; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-column-filter-clear-button:hover { - color: #343a40; - border-color: transparent; - background: #e9ecef; -} -.landing-themes .p-column-filter-clear-button:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #BFDBFE; -} -.landing-themes .p-column-filter-overlay { - background: #ffffff; - color: #495057; - border: 0 none; - border-radius: 6px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - min-width: 12.5rem; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items { - padding: 0.75rem 0; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item { - margin: 0; - padding: 0.75rem 1.25rem; - border: 0 none; - color: #495057; - background: transparent; - transition: box-shadow 0.2s; - border-radius: 0; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { - color: #1D4ED8; - background: #EFF6FF; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { - color: #495057; - background: #e9ecef; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; -} -.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid #dee2e6; - margin: 0.25rem 0; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-operator { - padding: 0.75rem 1.25rem; - border-bottom: 1px solid #dee2e6; - color: #343a40; - background: #f8f9fa; - margin: 0; - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint { - padding: 1.25rem; - border-bottom: 1px solid #dee2e6; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { - margin-bottom: 0.5rem; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button { - margin-top: 0.5rem; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint:last-child { - border-bottom: 0 none; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-add-rule { - padding: 0.75rem 1.25rem; -} -.landing-themes .p-column-filter-overlay-menu .p-column-filter-buttonbar { - padding: 1.25rem; -} .landing-themes .p-paginator { background: #ffffff; - color: #6c757d; - border: solid #e9ecef; + color: #6b7280; + border: solid #f3f4f6; border-width: 0; padding: 0.5rem 1rem; border-radius: 6px; @@ -1599,7 +899,7 @@ .landing-themes .p-paginator .p-paginator-last { background-color: transparent; border: 0 none; - color: #6c757d; + color: #6b7280; min-width: 3rem; height: 3rem; margin: 0.143rem; @@ -1610,9 +910,9 @@ .landing-themes .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, .landing-themes .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .landing-themes .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { - background: #e9ecef; + background: #f3f4f6; border-color: transparent; - color: #343a40; + color: #374151; } .landing-themes .p-paginator .p-paginator-first { border-top-left-radius: 50%; @@ -1624,6 +924,7 @@ } .landing-themes .p-paginator .p-dropdown { margin-left: 0.5rem; + margin-right: 0.5rem; height: 3rem; } .landing-themes .p-paginator .p-dropdown .p-dropdown-label { @@ -1639,7 +940,7 @@ .landing-themes .p-paginator .p-paginator-current { background-color: transparent; border: 0 none; - color: #6c757d; + color: #6b7280; min-width: 3rem; height: 3rem; margin: 0.143rem; @@ -1648,7 +949,7 @@ .landing-themes .p-paginator .p-paginator-pages .p-paginator-page { background-color: transparent; border: 0 none; - color: #6c757d; + color: #6b7280; min-width: 3rem; height: 3rem; margin: 0.143rem; @@ -1661,59 +962,54 @@ color: #1D4ED8; } .landing-themes .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { - background: #e9ecef; + background: #f3f4f6; border-color: transparent; - color: #343a40; + color: #374151; } - -.landing-themes .p-button-label { +.landing-themes .p-tag { + background: #3B82F6; + color: #ffffff; + font-size: 0.75rem; font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; } -.landing-themes .p-accordion .p-accordion-header .p-accordion-header-link { - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-tabview .p-tabview-nav li .p-tabview-nav-link { - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; -} -.landing-themes .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #3B82F6; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); -} -.landing-themes .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background-color: #3B82F6; -} -.landing-themes .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background-color: #3B82F6; -} -.landing-themes .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black; +.landing-themes .p-tag.p-tag-success { + background-color: #22C55E; + color: #ffffff; } -.landing-themes .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; +.landing-themes .p-tag.p-tag-info { + background-color: #0ea5e9; + color: #ffffff; } -.landing-themes .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; +.landing-themes .p-tag.p-tag-warning { + background-color: #f97316; + color: #ffffff; } -.landing-themes .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; +.landing-themes .p-tag.p-tag-danger { + background-color: #EF4444; + color: #ffffff; } -.landing-themes .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black; +.landing-themes .p-tag .p-tag-icon { + margin-right: 0.25rem; + font-size: 0.75rem; } -.landing-themes .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; +.landing-themes .p-tag .p-icon { + width: 0.75rem; + height: 0.75rem; } -.landing-themes .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; +.landing-themes .p-progressbar { + border: 0 none; + height: 1.5rem; + background: #e5e7eb; + border-radius: 6px; } -.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #3B82F6; +.landing-themes .p-progressbar .p-progressbar-value { + border: 0 none; + margin: 0; + background: #3B82F6; } -.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #3B82F6; +.landing-themes .p-progressbar .p-progressbar-label { + color: #ffffff; + line-height: 1.5rem; } diff --git a/src/assets/t2.svg b/src/assets/t2.svg deleted file mode 100644 index e1d9b86a9e7..00000000000 --- a/src/assets/t2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/virtua.svg b/src/assets/virtua.svg deleted file mode 100644 index 861d0b5a31a..00000000000 --- a/src/assets/virtua.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - -